大小相等的表格单元格可以填充包含表格的整个宽度

问题描述：

是否有一种使用HTML/CSS(具有相对大小)的方法来使一行单元格拉伸包含它的表格的整个宽度?

Is there a way using HTML/CSS (with relative sizing) to make a row of cells stretch the entire width of the table within which it is contained?

单元格的宽度应该相等，并且外部表的尺寸也可以通过<table width="100%">动态变化.

The cells should be equal widths and the outer table size is also dynamic with <table width="100%">.

目前，如果我未指定固定尺寸，单元格会自动调整大小以适合其内容.

Currently if I don't specify a fixed size; the cells just autosize to fit their contents.

答

您甚至不必为单元格设置特定的宽度，table-layout: fixed足以均匀分布单元格.

You don't even have to set a specific width for the cells, table-layout: fixed suffices to spread the cells evenly.

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;
}

<ul>
  <li>foo<br>foo</li>
  <li>barbarbarbarbar</li>
  <li>baz</li>
</ul>

请注意，要使table-layout正常工作，表样式元素必须设置宽度(在我的示例中为100％).

Note that for table-layout to work the table styled element must have a width set (100% in my example).

大小相等的表格单元格可以填充包含表格的整个宽度

相关推荐