Html 如何将表格宽度限制为包含元素（或屏幕）？

我需要使用

表格

显示表格数据，但它将在流体布局中；我想让它填充整个可用宽度，但不要水平扩展到超过最大屏幕宽度，这样

主体

就不会得到水平滚动条。相反，太宽的

td

元素将获得滚动条

在示例中，

表中有
数据
，
表
有
边框：1px纯黑
，当从curl进行管道传输时，输出应便于解析（因此
空白：pre
）；
div
只是普通的CSS布局助手，如果可能的话，让我们也摆脱它吧

重要的一点是，它不应该是固定像素宽度的布局类型，
表格
应该小于可用宽度，以防数据不需要那么多空间。总而言之，一张普通的桌子不会比屏幕宽。理想情况下，
表
只会拉伸父元素，直到达到该封闭元素的
最大宽度
，然后不会变宽

<> >代码> Chrome <代码>，在我认为是一个邪恶的黑客的情况下，我必须在可用的最大宽度下保持<代码>表>代码>，并在需要时显示<代码> TD < /代码>上的滚动条。然而，这对FF不起作用，该解决方案也不是正确的解决方案

下面的示例可以在上找到一段时间：


.nw{空白：nowrap}
.quirx div{宽度：100%；最大宽度：100%；空白：pre}
.quirx td{最大宽度：90px；边框：1px纯黑}
.quirx td+td{最大宽度：500px；溢出：自动}
table.quirx{宽度：100%；最大宽度：100%；边框：1px纯黑色；边框折叠：折叠}
td{align:left；最大宽度：100%}

遵守表格的最大宽度
只是一些信息
KEYDATA（可能包含预格式化的长行）XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
我在下面添加了一些测试HTML/CSS的标记，以实现我认为您需要的功能

有固定宽度单元格样式
.fixedcell
和流体宽度单元格样式
.fluidcell
。我设置了一个固定的宽度（本例为75px），只是为了更好地说明问题

流体宽度的有
width:auto
，因此它们填充剩余表格空间的宽度；它们还具有重要的
空白：nowrap
，因此文本不会按单元格高度展开（
空白：pre
也有效）；最后，它们有
溢出：隐藏
，这样文本不会溢出宽度并使事情变得丑陋，或者您可以设置溢出：滚动，以便在必要时在这些单元格中设置滚动条

表格设置为100%宽度，以便根据需要扩展以适合屏幕/etc。关于表格样式的重要一点是
表格布局：fixed
，这使表格遵循页面布局，而不是根据其自身内容自动调整大小（
表格布局：auto
）

我还添加了一些边框来帮助说明表格和单元格的边界



具有自动宽度调整和溢出隐藏功能的表。
表格{宽度：100%；边框：实心1px红色；表格布局：固定；}
表td{边框：实心1px绿色；}
.fixedcell{宽度：75px；}
.fluidcell{宽度：自动；溢出：隐藏；空白：nowrap；}
带有一个流体柱的表：
第1行
一大堆内容都可以放在这里，但它仍然需要很好地放入手机，而不会把事情搞砸
修理工
另一个
具有两个流体列的表：
第1行
一大堆内容都可以放在这里，但它仍然需要很好地放入手机，而不会把事情搞砸
诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类诸如此类
修理工
另一个