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

I'm trying to create a table adhering to the following requirements:

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

The table width must be defined as 0 - the browser should calculate the width according to the column widths (this is to accommodate a column-resize plugin).
表的宽度必须定义为0——浏览器应该根据列的宽度计算宽度(这是为了适应一个列大小调整的插件)。
Some columns may receive a fixed width (e.g. 50px);
有些列可以接收到一个固定的宽度(例如50px);
Columns that do not receive a fixed width, must auto-fit to the content.
不接收固定宽度的列必须自动适合内容。

I have created a small example to illustrate the problem - as you can see column 3 stays at width 0 and so is not visible.

我创建了一个小示例来说明这个问题——您可以看到，第3列的宽度为0，因此不可见。

EDIT: If "table-layout: fixed" is removed. the third column appears, but the fixed widths are ignored and all columns become auto-fit.

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

HTML

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

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

Is this even possible? Any help would be appreciated...

这是可能吗?如有任何帮助，我们将不胜感激。

1 个解决方案

#1

It's not possible with table-layout: fixed and a width of 0 on your table.

表布局是不可能的:固定的，在你的表上宽度为0。

Form the W3 Spec section 17.5.2.1:

表格W3规格17.5.2.1:

In the fixed table layout algorithm, the width of each column is determined as follows:

在固定表布局算法中，各列的宽度确定如下:

A column element with a value other than 'auto' for the 'width' property sets the width for that column.

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

Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns.

否则，第一行中具有“width”属性的值“auto”之外的值的单元格将决定该列的宽度。如果单元格跨越多个列，那么宽度将除以列。

Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

剩下的任何列都将剩下的水平表空间(减去边框或单元格间距)平均分割。

However, when you do the automatic layout (described in section 17.5.2.2) your widths will be pushed around to work with your content and only use the widths provided when possible. For instance, if the sum of the minimum widths of each column exceeds the container width of your table, everything will get shifted around to fit independent of what widths you set.

但是，当您进行自动布局时(在第17.5.2.2节中描述)，您的宽度将被推到与内容一起工作，并且只在可能的情况下使用所提供的宽度。例如，如果每个列的最小宽度之和超过了表的容器宽度，那么所有的东西都将被移动以适应您设置的宽度。

It should be also noted that:

还应指出:

UAs are not required to implement this algorithm to determine the table layout in the case that 'table-layout' is 'auto'; they can use any other algorithm even if it results in different behavior.

如果“table-layout”是“auto”，则不需要UAs实现该算法来确定表布局;他们可以使用任何其他算法，即使它导致不同的行为。

So it looks like the answer is a unfortunately a long-winded "no" :(

所以答案似乎是一个很不幸的长篇大论的“不”:

#1