How to Make the CSS overflow: hidden Work on a <td> Element?

CSS overflow: hidden; property is used to hide the lengthy content based on the size of your element.

Here in this article, we will see how you can use overflow: hidden; on <td> element so we can keep the lengthy content hidden. If you did not set the size of your <td> element then it will stretch and show you the whole content.

Approaches to Make the CSS overflow: hidden Work

Using table-layout: fixed Property

By default, tables adjust column widths dynamically. Using CSS table-layout: fixed; property on the table element ensures that the column widths stay fixed and don't expand to fit their content.

Example Code

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        table {
            table-layout: fixed;
            width: 100%;
        }

        td {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>
                CSS overflow: hidden; property is used to hide 
                the lengthy content based on the size of you element.
            </td>
            <td>
                CSS overflow: hidden; property is used to hide 
                the lengthy content based on the size of you element.
            </td>
        </tr>
    </table>
</body>

</html>

Output


Using text-overflow and white-space Properties

To hide extra content inside the cell, use text-overflow and white-space properties along with the overflow property on the td element.

  • CSS overflow: hidden: Hides any content that overflows the cell.
  • CSS text-overflow: ellipsis: Adds "..." at the end of truncated text.
  • CSS white-space: nowrap: Prevents the text from wrapping to the next line.

Example Code

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        table {
            width: 70%;
            table-layout: fixed;
        }

        td {
            padding: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            border: 1px solid #070707;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>
                CSS overflow: hidden; property is used to hide 
                the lengthy content based on the size of you element.
            </td>
            <td>
                CSS overflow: hidden; property is used to hide 
                the lengthy content based on the size of you element.
            </td>
        </tr>
    </table>
</body>

</html>

Output


Shefali Jangid
Shefali Jangid

Passionate about Simplifying Tech

Updated on: 2024-11-27T12:47:27+05:30

480 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements