根据内容制作 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 中执行此操作，但使用这种方法您无需定义表格单元格的宽度。他们只会从内容中继承他们的宽度。第三列的内容没有固定的宽度，会随着用户的浏览器宽度而增长，并且是流动的。