html - 根据内容制作固定宽度的 HTML 表格

Question

我想制作一个 HTML 表格。假设它有 3 列。我希望第一列的宽度固定，其他两列根据可用空间和它们之间的比例扩展/收缩。

这一切都可以通过为第一列设置固定大小的宽度，并为其他两列使用百分比来简单地完成。但我想要更难的东西。

我希望浏览器自己计算出宽度。

我希望它获得列的理想宽度，然后使该列成为固定宽度。我不必盯着文本并找到宽度，浏览器只需获取文本的自然宽度并将其设置为列宽即可。

这是在 GUI 布局网格中相当常见的事情，您可以在其中将某些列设置为固定大小。大小由列内容的大小自动确定。布置固定大小的列后剩余的空间用于非固定大小的列。

在 HTML/CSS 中有什么方法可以做到这一点吗？

请注意，JavaScript 在这里不是一个选项(它在 wiki 中，我不想在那里介绍 JavaScript)。

Answer 1

这并不太难，但它没有内容的精确大小，除非您定义它。使用此 table，您会看到中间的列最宽:

<table width="100%" cellpadding="0" cellspacing="0" style="border:none;">
    <tr>
        <td width="150" valign="top">This is a fixed width column, it's only 50 pixels wide</td>
        <td valign="top">This is a variable width column that has a lot of content</td>
        <td valign="top">This is also a variable width column as well</td>
    </tr> 
</table>

如果交换中间单元格和最后一个单元格的内容，您会看到内容宽度随内容而变化。

<table width="100%" cellpadding="0" cellspacing="0" style="border:none;">
    <tr>
        <td width="150" valign="top">This is a fixed width column, it's only 50 pixels wide</td>
        <td valign="top">This is also a variable width column as well</td>
        <td valign="top">This is a variable width column that has a lot of content</td>
    </tr> 
</table>

现在，您还可以通过在具有固定宽度的单元格中嵌套表格来解决这个问题。在下一个示例中，它是中心列。这样您就可以让最后一列的宽度增加而只占用空间。

<table width="100%" cellpadding="0" cellspacing="0" style="border:none;">
    <tr>
        <td width="150" valign="top">This is a fixed width column, it's only 50 pixels wide</td>
        <td valign="top">
            <table width="130" cellpadding="0" cellspacing="0" style="border:none;">
                <tr>
                    <td>This is a fixed width table's content inside of a nested table</td>
                </tr>
            </table>
        </td>
        <td valign="top">This is a variable width column that has a lot of content and should push the boundaries</td>
    </tr> 
</table>

这样，您就有了一些处理表格内流动内容的策略。

** -- 更新 -- **

可能我看错了，抱歉。

表格总是从最宽的单元格中获取列宽。如果您有几行内容宽度不同，则列都将继承列中最宽的单元格宽度。因此，要使表格的列固定宽度，您需要具有固定宽度的内容或将内容包装在固定宽度的元素中。

gMail、Google Reader 和许多在线电子邮件客户端使用类似的方法在左侧设置固定宽度的导航，并让渲染区域随着用户的浏览器而增长。

<table width="100%" cellpadding="0" cellspacing="0" style="border:none;">
    <tr>
        <td valign="top">
            <table width="50" cellpadding="0" cellspacing="0" style="border:none;">
                <tr>
                    <td>This is a fixed width column, it's only 50 pixels wide</td>
                </tr>
            </table>
        </td>
        <td valign="top">
            <table width="130" cellpadding="0" cellspacing="0" style="border:none;">
                <tr>
                    <td>This is a fixed width table's content inside of a nested table</td>
                </tr>
            </table>
        </td>
        <td valign="top">This is a variable width column that has a lot of content and should push the boundaries</td>
    </tr> 
</table>

他们通常在 CSS 中执行此操作，但使用这种方法您无需定义表格单元格的宽度。它们只会从内容中继承它们的宽度。第三列的内容没有固定宽度，将随着用户的网络浏览器宽度而增长并且是流动的。