Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to fix the height of rows in the table?

  • Last Updated : 29 Jul, 2021

The height of rows ‘tr’ in a table can be fixed very easily. This can be done by adding the height attribute in the tr tag. If the height is not specified, the height of the row changes according to the content. The height can be specified either in pixels, or percentage.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<tr height="px | %">

Approach:

  • 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 percentage.
  • If the content in the row is large, it will overflow.

Example: In this example, the height of the first row has been fixed, but the height of the second row has not been. So, when we vary the size of the screen, the height of the first row remains the same, but the height of the second-row changes according to the content. However, if the specified height is not sufficiently large according to the content, this may not work, and the first row will overflow and behave similarly to the second row.



Run the following code and vary the screen-size to see the difference between both the rows:




<!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: 1px solid black;
            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:

  • Before decreasing screen-size:

    GFG

  • After decreasing screen-size:

    GFG

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!