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.
