How to set the table column width constant regardless of the amount of text in its cells with CSS?

Spread the love

Sometimes, we want to set the table column width constant regardless of the amount of text in its cells with CSS.

In this article, we’ll look at how to set the table column width constant regardless of the amount of text in its cells with CSS.

How to set the table column width constant regardless of the amount of text in its cells with CSS?

To set the table column width constant regardless of the amount of text in its cells with CSS, we set the width of the td elements.

For instance, we write

<table>
  <tr>
    <th>header 1</th>
    <th>header</th>
  </tr>
  <tr>
    <td>data</td>
    <td>data 2</td>
  </tr>
</table>

to add a table.

Then we write

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

to set the td and th elements’ widths to be 100px.

And we hide any overflow content in them with overflow: hidden;.

Conclusion

To set the table column width constant regardless of the amount of text in its cells with CSS, we set the width of the td elements.

Leave a Reply

Your email address will not be published. Required fields are marked *