How To Fix The Width Of Columns In The Table ? - GeeksforGeeks

Trang chủ » Html Change Column Width Table » How To Fix The Width Of Columns In The Table ? - GeeksforGeeks

Có thể bạn quan tâm

Fixing the width of columns in a table involves setting a specific width for each column to maintain consistent sizing. This can be achieved using CSS properties like width on <th> or <td> elements, or using the <colgroup> and <col> tags to control column widths.

Syntax

<td width ="px | %">

Approach:

  • The width attribute is used to set the width of a column. It is added in the <td> tag.
  • The width should be specified according to the content, either in pixels or percentages.
  • If the content in the column is large, it will overflow.

Example 1: In this example, the first column’s width is fixed, while others adjust based on screen size. If the fixed width is insufficient, the first column may overflow and behave like the others.

HTML <!DOCTYPE html> <html> <head> <style> table{ margin-left:auto; margin-right:auto; font-size:20px; height:100%; table-layout:fixed; } td{ border:1pxsolidblack; text-align:center; padding:10px; } tr:nth-child(even){ background-color:#00cf45; } h1{ color:green; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h2> To fix the width of columns in the table </h2> <table> <tr style="color:white; background-color:black;"> <td width="100px">Col1</td> <td>Col2</td> <td>Col3</td> </tr> <tr> <td> Width of this column remains same on varying screen-size </td> <td> Width of this column changes on varying screen-size </td> <td> Width of this column also changes on varying screen-size </td> </tr> <tr> <td>Geek1</td> <td>Geek2</td> <td>Geek3</td> </tr> <tr> <td>Geek4</td> <td>Geek5</td> <td>Geek6</td> </tr> <tr> <td>Geek7</td> <td>Geek8</td> <td>Geek9</td> </tr> </table> </center> </body> </html>

Output:

https://media.geeksforgeeks.org/wp-content/uploads/20240731080833/Screen-Capture-13.mp4

Example 2: In this example, we creates a centered table with a fixed-width first column and dynamic-width other columns. The table has alternating row colors, and headers are styled with a different background color.

HTML <!DOCTYPE html> <html> <head> <style> table{ margin-left:auto; margin-right:auto; font-size:20px; height:100%; table-layout:fixed; } td{ border:1pxsolidblack; text-align:center; padding:10px; } tr:nth-child(even){ background-color:#00cf45; } h1{ color:green; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h2> To fix the width of columns in the table </h2> <table> <tr style="color:white; background-color:black;"> <td width="50%">Col1</td> <td>Col2</td> <td>Col3</td> </tr> <tr> <td> Width of this column remains same on varying screen-size </td> <td> Width of this column changes on varying screen-size </td> <td> Width of this column also changes on varying screen-size </td> </tr> <tr> <td>Geek1</td> <td>Geek2</td> <td>Geek3</td> </tr> <tr> <td>Geek4</td> <td>Geek5</td> <td>Geek6</td> </tr> <tr> <td>Geek7</td> <td>Geek8</td> <td>Geek9</td> </tr> </table> </center> </body> </html>

Output: The width of the column is set to “50%” , so even after changing the screen size, the width of the first column remains “50%”.

https://media.geeksforgeeks.org/wp-content/uploads/20240731080852/Screen-Capture-2211.mp4

S

SHUBHAMSINGH10 Follow Improve Previous Article How to use tables to structure forms ? Next Article How to center contents of an HTML table ?

Từ khóa » Html Change Column Width Table