减小表列宽以适应子元素"Standard"方法

Question

我有一个已知宽度的表，776个像素，有三列。第三列具有已知宽度，216个像素，但其他两列不具有已知宽度。我希望第二列的宽度与其子元素的宽度相同。不管剩下什么宽度，776-216-2nd，都将是第一列的宽度。

我发现了一个例子，它将列的宽度设置为1像素，该列的宽度应该最小化。这似乎确实有效，但它似乎是一个黑客，我不明白为什么它有效。有没有一种更"标准"的方法可以达到同样的结果？

以下是我的HTML与内联CSS作为一个例子：

<table style="width:776px; height:48px;">
    <tr>
        <td style="height:48px;">
            <!-- Note: Setting font size to zero prevents white space from contributing to an inline block element's width -->
            <div style="background:#f0f0f0; border:solid 2px #808080; font-size:0; margin-left:8px; text-align:center;">
                <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Art</h3></a>
                <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Events</h3></a>
                <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Papers</h3></a>
                <a href="#"><h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Research</h3></a>
            </div>
        </td>
        <!-- Note: Setting width to one pixel removes horizontal spacing -->
        <td style="vertical-align:middle; width:1px; height:48px;">
            <h3 style="margin-left:8px;"><label for="search">Search:</label></h3>
        </td>
        <td style="vertical-align:middle; width:216px; height:48px;">
            <input id="search" style="margin-left:8px; width:208px;" type="text" value="" maxlength="32">
        </td>
    </tr>
</table>

Answer 1

好吧，一个简单的方法是将第一个单元格设置为width: 100%。这将迫使它尽可能多地填充父表的宽度。然后，在第三个单元格中，放置一个216px内容元素（类似于div）。

表的单元格总是试图尊重其内容。因此，通过这种方式，第二个div将在中间被压缩，只考虑其自身的内容。第三个将尊重其216px内容，第一个将填充其余内容

工作JsFiddle示例

<table>
    <tr>
        <td>1stContent</td> <!-- Fills what it can -->
        <td>2ndContent</td> <!-- Squized in the middle -->
        <td>
            <!-- Will respect the width of its content -->
            <div class="dv3rd">
                216px
            </div>
        </td>
    </tr>
</table>

CSS：

table {
    width: 776px;
    background: silver;
}
td:nth-child(1) {
    width: 100%;
    background: red;
}
td:nth-child(2) {
    background: green;
}
td:nth-child(3) {
    background: blue;
}
.dv3rd {
    width: 216px;
}

但是

正如我们所评论的，您不应该在页面布局中使用表。一个简单的替代方法是使用css表，其中的div可以像display: table和display: table-cell元素一样工作。

以下是相同的示例，但使用div：

工作JsFiddleExample-Tableless

<div class="table">
    <div>
        1stContent
    </div>
    <div>
        2ndContent
    </div>
    <div>
        <div class="dv3rd">
            216px
        </div>
    </div>
</div>

CSS：

.table {
    width: 776px;
    background: silver;
    display: table;
}
.table > div:nth-child(1) {
    display: table-cell;
    width: 100%;
    background: red;
}
.table > div:nth-child(2) {
    display: table-cell;
    background: green;
}
.table > div:nth-child(3) {
    display: table-cell;
    background: blue;
}
.dv3rd {
    width: 216px;
}

Answer 2

我在BoltClocks链接中找到了这项工作的原因（在评论中）：http://www.w3.org/TR/CSS21/tables.html#auto-表格布局

该算法可能效率低下，因为它需要用户代理在确定最终布局，可能需要多次通过。

列宽确定如下：

1. 计算每个单元格的最小内容宽度（MCW）：格式化的内容可以跨越任意行数，但不能溢出单元格框。如果指定的单元格"宽度"（W）大于MCW，则W是最小单元格宽度。值"auto"表示MCW是最小单元格宽度

答案：
计算每个单元格的最小内容宽度（MCW）：格式化的内容。。。可能不会使单元格框溢出。