How To Fix The Height Of Rows In The Table? - GeeksforGeeks

Trang chủ » Html Table Row Height Stretch » How To Fix The Height Of Rows In The Table? - GeeksforGeeks

Có thể bạn quan tâm

Fixing the height of rows in a table ensures uniformity and prevents dynamic resizing based on content. It’s achieved by setting a specific height for the `<tr>` elements using CSS, ensuring consistent presentation.

Here we are using some common approaches:

Table of Content

  • Using height attribute
  • Using height property in CSS

Approach 1: Using height attribute

  • In the first example, The height attribute is used to set the height of a row. It is added in the <tr> tag.
  • The height should be specified according to the content, either in pixels or percentages.
  • If the content in the row is large, it will overflow.
  • In the second example, we are fixing the height by using the height property in CSS, as much as content will increase the height must be increased.

Example 1: In this example, the height of the first row has been fixed, but the height of the second row has not been.

html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>How to fix height of table tr?</title> <style> table{ margin-left:auto; margin-right:auto; font-size:10px; width:100%; table-layout:fixed; } td{ border:1pxsolidblack; text-align:center; padding:10px; } tr:nth-child(even){ background-color:green; } </style> </head> <body> <table> <!-- row with fixed height--> <tr height="300px"> <td>Height of this row remains same on varying screen-size</td> <td>Geeks for Geeks</td> <td> Geeks for Geeks is a Computer Science Portal created with the goal of providing well written, well thought and well-explained solutions for selected questions. </td> </tr> <!-- row without fixed height--> <tr> <td>Height of this row changes on varying screen-size</td> <td>Geeks for Geeks</td> <td> Geeks for Geeks is a Computer Science Portal created with the goal of providing well written, well thought and well-explained solutions for selected questions. </td> </tr> </table> </body> </html>

Output:

fixing-the-height-of-rows-in-the-table

fixing the height of rows in the table Example Output

Approach 2: Using height property in CSS

CSS sets fixed height for table rows, ensuring uniformity. By applying the height property to the <tr> elements, consistent row height is maintained regardless of content or screen size.

Example : In this example, we are fixing the height by using height property in CSS.

HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>How to fix height of table tr?</title> <style> table, td{ border:1pxsolidblack; } tr{ height:200px; } </style> </head> <body> <table> <!-- row with fixed height--> <tr> <td> Height of this row remains the same on varying screen-size </td> <td>Geeks for Geeks</td> <td> Geeks for Geeks is a Computer Science Portal created with the goal of providing well-written, well-thought and well-explained solutions for selected questions. </td> </tr> <!-- row without fixed height--> <tr> <td> Height of this row changes on varying screen-size </td> <td>Geeks for Geeks</td> <td> Geeks for Geeks is a Computer Science Portal created with the goal of providing well-written, well-thought and well-explained solutions for selected questions. </td> </tr> </table> </body> </html>

Output:

fixing-the-height-of-rows-in-the-table-2

fixing the height of rows in the table Example Output

S

shs_ Follow Improve Previous Article Why should we avoid use of tables for layout in HTML ? Next Article How to set the number of rows a table cell should span in HTML ?

Please Login to comment...

Từ khóa » Html Table Row Height Stretch