How to set fixed table cell width with CSS?

Sometimes, we want to set fixed table cell width with CSS.

In this article, we’ll look at how to set fixed table cell width with CSS.

How to set fixed table cell width with CSS?

To set fixed table cell width with CSS, we set the table-layout property.

For instance, we write

<table class="fixed">
  <col width="20px" />
  <col width="30px" />
  <col width="40px" />
  <tr>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
</table>

to add a table.

We add col elements and set their widths to fixed widths.

Then we write

table.fixed {
  table-layout: fixed;
}

table.fixed td {
  overflow: hidden;
}

to add table-layout: fixed; to make the col element width attribute values apply toi the td elements.

Conclusion

To set fixed table cell width with CSS, we set the table-layout property.