4

我正在尝试创建一个符合以下要求的表：

  1. 表格宽度必须定义为 0 - 浏览器应根据列宽计算宽度（这是为了适应列调整插件）。
  2. 某些列可能会收到固定宽度（例如 50px）；
  3. 不接收固定宽度的列必须自动适应内容。

我创建了一个小示例来说明问题 - 正如您所见，第 3 列保持在宽度 0 处，因此不可见。

编辑：如果“表格布局：固定”被删除。第三列出现，但固定宽度被忽略，所有列都自动适应。

HTML

<table>
<tr>
    <td class="cell header" id="header1">Header 1</td>
    <td class="cell header" id="header2">Header 2</td>
    <td class="cell header" id="header3">Header 3</td>
</tr>
<tr>
    <td class="cell">Cell 1</td>
    <td class="cell">Cell 2</td>
    <td class="cell">Very looooong content</td>
</tr>
</table>

CSS

table {
    table-layout: fixed;
    width: 100%;
    border: 1px solid #696969;
}

.cell {
    color: #898989;
    border: 1px solid #888;
    padding: 2px;
    overflow: hidden;
}

.header {
    background-color: lightsteelblue;
    color: black;
}

#header1, #header2 {
    width: 50px;
}

这甚至可能吗？任何帮助，将不胜感激...

​</p>

4

1 回答 1

5

使用 table-layout: fixed 和宽度为 0 是不可能的。

形成W3 规范第 17.5.2.1 节：

在固定表格布局算法中，每列的宽度确定如下：

  1. 'width' 属性的值不是 'auto' 的列元素设置该列的宽度。
  2. 否则，第一行中 'width' 属性的值不是 'auto' 的单元格将确定该列的宽度。如果单元格跨越多列，则宽度将按列划分。
  3. 任何剩余的列均分剩余的水平表空间（减去边框或单元格间距）。

但是，当您执行自动布局时（在第 17.5.2.2 节中描述），您的宽度将被推送以处理您的内容，并且仅在可能的情况下使用提供的宽度。例如，如果每列的最小宽度之和超过了表格的容器宽度，则所有内容都会移动以适应您设置的宽度。

还应该注意的是：

在 'table-layout' 为 'auto' 的情况下，UA 不需要实现该算法来确定表格布局；他们可以使用任何其他算法，即使它导致不同的行为。

因此，不幸的是，答案似乎是一个冗长的“不”:(

于 2013-10-11T15:25:44.510 回答