Open In App

How to fix the height of rows in the table?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to fix the height of rows in the table. 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 percentages.

Approach:

  • 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: 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:

ezgifcom-video-to-gif-(8)

Output

Example 2: 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: 1px solid black;
        }
 
        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:

ezgifcom-video-to-gif-(9)

Output

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.



Last Updated : 29 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads