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

Solution with CSS properties

To use the CSS overflow property with its "hidden" value on the HTML <td> element, you need to set the table-layout property with the "fixed" value and an appropriate width on the <table> element. Then, you need to add the overflow property set to "hidden" and white-space property set to "nowrap" on the table cell.

The width of the table must be the same or smaller than the fixed width of cells.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of using overflow: hidden on a table with one fixed-width column:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
      }      
      table {
        table-layout: fixed;
        border-collapse: collapse;
        width: 100%;
        max-width: 100px;
      }      
      td {
        background: #86dbd7;
        padding: 25px;
        overflow: hidden;
        white-space: nowrap;
        width: 100px;
        border: solid 1px #666;
      }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
        </tr>
        <tr>
          <td> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Result

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Example of using overflow: hidden on a table with multiple fixed-width columns:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
      }      
      table {
        table-layout: fixed;
        border-collapse: collapse;
        width: 100%;
        max-width: 200px;
      }      
      td {
        background: #86dbd7;
        padding: 20px;
        overflow: hidden;
        white-space: nowrap;
        width: 100px;
        border: solid 1px #666;
      }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
          <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
        </tr>
        <tr>
          <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
          <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

In the next example, we set the width of the table, and any extra width will be taken by fluid cells.

Example of using overflow: hidden on a table with multiple columns, fixed and fluid width:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
      }      
      table {
        table-layout: fixed;
        border-collapse: collapse;
        width: 100%;
      }      
      td {
        background: #86dbd7;
        padding: 20px;
        border: solid 1px #000;
      }      
      tr td:first-child {
        overflow: hidden;
        white-space: nowrap;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <table>
      <tbody>
        <tr>
          <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
          <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
        </tr>
        <tr>
          <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
          <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>