How to make columns of equal width in ?
如何制作宽度相等的列？
Dynamically changing the number of columns.
动态更改列数。
Today I have 13 columns. Tomorrow will be raced 16. All do not particularly want to recalculate.
今天我有13列。明天将参加比赛16.所有人都不想特别重新计算。
3 个解决方案
#1
93
I think that this will do the trick:
我认为这样做可以解决问题：
table{
table-layout: fixed;
width: 300px;
}
#2
9
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.
可能是它解决了你的问题。
#3
6
Found this on HTML table: keep the same width for columns
在HTML表格上找到它：为列保持相同的宽度
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 .
如果你设置样式table-layout：fixed;在您的桌面上，您可以覆盖浏览器的自动列大小调整。然后，浏览器将根据表格第一行中单元格的宽度设置列宽。更改您的内部并删除其内部，然后为其中的单元格设置固定宽度。
#1
93
I think that this will do the trick:
我认为这样做可以解决问题：
table{
table-layout: fixed;
width: 300px;
}
#2
9
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.
可能是它解决了你的问题。
#3
6
Found this on HTML table: keep the same width for columns
在HTML表格上找到它：为列保持相同的宽度
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 .
如果你设置样式table-layout：fixed;在您的桌面上，您可以覆盖浏览器的自动列大小调整。然后，浏览器将根据表格第一行中单元格的宽度设置列宽。更改您的内部并删除其内部，然后为其中的单元格设置固定宽度。