Open In App

How to fix the height of rows in the table?

Last Updated : 15 May, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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:

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

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

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

fixing the height of rows in the table Example Output



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads