小编典典

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

css

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

单元格的宽度应相等,并且外部表格的大小也应使用来动态变化<table width="100%">

目前,如果我没有指定固定大小,单元格会自动调整大小以适合其内容。


阅读 308

收藏
2020-05-16

共1个答案

小编典典

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

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%)。

2020-05-16