Question

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

表格宽度必须定义为0 - 浏览器应根据列宽计算宽度（这是为了容纳列调整大小的插件）。
某些列可能会收到固定宽度（例如50px）;
未获得固定宽度的列必须自动适合内容。

我创建了一个small example来说明问题 - 因为您可以看到第3列的宽度为0，因此不可见。

编辑：如果删除了“table-layout：fixed”。出现第三列，但忽略固定宽度，所有列都自动适合。

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

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

Answer 1

桌面布局不可能：固定，桌子宽度为0。

形成W3 Spec section 17.5.2.1：

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


“width”属性的值为“auto”的列元素设置该列的宽度。

否则，第一行中“width”属性的值不是“auto”的单元格将确定该列的宽度。如果   单元格跨越多个列，宽度除以   列。

任何剩余的列均等地划分剩余的水平表空间（减去边框或单元格间距）。

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

还应该注意：

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

所以看起来答案很遗憾是一个啰嗦的“不”:(

HTML表格，自动适合某些列，其他列固定宽度

1 个答案: