在<table> </table>中创建宽度相等的列

Question

如何制作宽度相等的列？

动态更改列数。

今天我有13列。明天将参加比赛16.所有人都不想特别重新计算。

Answer 1

我认为这会解决问题：

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

Answer 2

使用与表及其完全动态相同的以下属性：

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>

可能是它解决了你的问题。

Answer 3

在HTML table: keep the same width for columns

上找到了这个

  

如果设置样式表 - layout：fixed;在你的桌子上，你可以   覆盖浏览器的自动列大小调整。浏览器会   然后根据第一行中单元格的宽度设置列宽   桌子。更改您的内部并删除内部   然后，为。中的单元格设置固定宽度。