How to make equal-sized table cells to fill the entire width of the containing table with CSS?

Spread the love

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.

Leave a Reply

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