html表格宽高随内容,根据HTML内容的内容使HTML表格固定宽度

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

This is a fixed width column, it's only 50 pixels wide

This is a variable width column that has a lot of content

This is also a variable width column as well

如果您交换中间和最后一个单元格的内容，您将看到内容宽度随内容移动。

This is a fixed width column, it's only 50 pixels wide

This is also a variable width column as well

This is a variable width column that has a lot of content

现在，您还可以通过将表嵌套在具有固定宽度的单元格中来实现此目的。在下一个示例中，它是中心列。通过这种方式，您可以让最后一列的宽度增大，并占用空间。

This is a fixed width column, it's only 50 pixels wide

This is a fixed width table's content inside of a nested table

This is a variable width column that has a lot of content and should push the boundaries

有了这个，您可以采用一些策略来处理表中的流体内容。

** - 更新 - **

也许我读错了，抱歉。

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

gMail，谷歌阅读器和许多在线电子邮件客户端使用类似的方法在左侧有一个固定宽度导航，让渲染区域随用户的浏览器增长。

This is a fixed width column, it's only 50 pixels wide

This is a fixed width table's content inside of a nested table

This is a variable width column that has a lot of content and should push the boundaries

它们通常在CSS中执行此操作，但使用此方法时，您不会定义表格单元格的宽度。他们只会从内容中继承他们的宽度。第三列，其内容没有固定宽度，将随用户的Web浏览器宽度增长而变得流畅。