Question

我有一个已知宽度，776像素和三列的表格。第三列具有已知宽度，216像素，但另外两列没有已知宽度。我想要的行为是第二列的宽度与其子元素相同。无论剩下多少宽度，776 - 216 - 2nd，都是第一列的宽度。

我找到了一个示例，它将宽度最小化的列设置为1像素。这似乎有效，但似乎它是一个黑客，我不明白为什么它的工作原理。是否有更多＆＃34;标准＆＃34;如何实现同样的结果？

以下是以内联CSS为例的HTML：

<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内容，第一个将填补其余内容。

Working JsFiddleExample

<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代替：

Working 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-table-layout

...此算法可能效率低下，因为它需要用户代理   在确定之前有权访问表中的所有内容   最终布局，可能要求不止一次通过。

列宽如下确定：


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

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

＆＃34;标准＆＃34;减少表列宽度以适合子元素的方法

2 个答案: