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阅读器和许多在线电子邮件客户端使用类似的方法在左侧使用固定宽度导航，并让渲染区域随用户的浏览器一起增长。

<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中执行此操作，但使用此方法时，您无法定义表格单元格的宽度。他们只会从内容中继承自己的宽度。第三列，其内容没有固定的宽度，将随着用户的Web浏览器宽度增长而变得流畅。

根据HTML内容的内容使HTML表格固定宽度

1 个答案: