Make columns of equal width in <table>

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.

Found this on HTML table: keep the same width for columns

If you set the style table-layout: fixed; on your table, you can override the browser's automatic column resizing. The browser will then set column widths based on the width of cells in the first row of the table. Change your to and remove the inside of it, and then set fixed widths for the cells in .

I think that this will do the trick:

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