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.