Make columns of equal width in <table>

Question

How do I make columns of equal width in <table>?

I am dynamically changing the number of columns. Today I have 13 columns. Tomorrow it will be raised to 16. I do not particularly want to recalculate.

Answer 1

I think that this will do the trick:

table{     table-layout: fixed;     width: 300px; } 

Answer 2

Use following property same as table and its fully dynamic:

ul {      width: 100%;      display: table;      table-layout: fixed; /* optional, for equal spacing */      border-collapse: collapse;  }  li {      display: table-cell;      text-align: center;      border: 1px solid pink;      vertical-align: middle;  }

<ul>    <li>foo<br>foo</li>    <li>barbarbarbarbar</li>    <li>baz klxjgkldjklg </li>    <li>baz</li>    <li>baz lds.jklklds</li>  </ul>

May be its solve your issue.