Sometimes, we want to make equal-sized table cells to fill the entire width of the containing table with CSS.
In this article, we’ll look at how to make equal-sized table cells to fill the entire width of the containing table with CSS.
How to make equal-sized table cells to fill the entire width of the containing table with CSS?
To make equal-sized table cells to fill the entire width of the containing table with CSS, we make the table layout fixed.
For instance, we write
<ul>
<li>foo<br />foo</li>
<li>bar</li>
<li>baz</li>
</ul>
to add a list.
Then we write
ul {
width: 100%;
display: table;
table-layout: fixed;
border-collapse: collapse;
}
li {
display: table-cell;
text-align: center;
border: 1px solid hotpink;
vertical-align: middle;
word-wrap: break-word;
}
to add table-layout: fixed; to make all the li’s fixed size.
Conclusion
To make equal-sized table cells to fill the entire width of the containing table with CSS, we make the table layout fixed.
