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 that all rows have a uniform appearance, preventing them from resizing dynamically based on their content. This approach is useful for maintaining a consistent presentation, especially when dealing with tabular data that needs to be displayed neatly.

Here we are using some common approaches:

Table of Content

  • Using the height Attribute
  • Using the height Property in CSS

Approach 1: Using the height Attribute

Traditionally, the height attribute could be directly added to the <tr> tag to set the height of table rows. However, this approach is not recommended in modern web development because it has been deprecated in HTML5, and CSS should be used instead.

Example 1: Using the height Attribute

In this example, we set the height of the first row using the height attribute in the <tr> tag. Note that the height is fixed regardless of content size, and any overflow will be hidden or managed depending on the CSS settings.

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 the height Property in CSS

Using CSS is the preferred method for setting the height of table rows, providing better control over the appearance and behavior of elements. By applying the height property to the <tr> elements via CSS, you can maintain a consistent row height regardless of the content or screen size.

Example 2: Using CSS to Fix Row Height

Here, we set the height of table rows using CSS, ensuring that all rows maintain a uniform height. This approach also allows for more flexibility with additional styling, such as handling overflow.

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 ?

Từ khóa » Html Table Row Height Stretch