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

Question

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

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

我已经创建了一个小例子来说明问题 - 因为你可以看到第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规范第17.5.2.1节:

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

1. "width"属性的值为"auto"的列元素设置该列的宽度.
2. 否则,第一行中具有"width"属性的"auto"值以外的值的单元格将确定该列的宽度.如果单元格跨越多个列,则宽度将在列上分割.
3. 任何剩余的列均等地划分剩余的水平表空间(减去边框或单元格间距).

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

还应该指出:

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

所以看起来答案是不幸的是一个啰嗦的"不":(