"标准"方法减少表格列宽以适合子元素

Question

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

我找到了一个示例,它设置应该将其宽度最小化为1像素的列的宽度.这似乎有效,但似乎它是一个黑客,我不明白为什么它的工作原理.是否有更"标准"的方法来实现相同的结果？

这是我的带有内联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

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

...该算法可能效率低下，因为它要求用户代理在确定最终布局之前能够访问表中的所有内容，并且可能需要多次传递。

列宽确定如下：

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

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