在示例中，表中有DATA，表格具有边框：1px纯黑色，输出也可以方便地从卷曲中进行解析(因此为空格：pre); div只是正常的CSS布局帮手，如果可能，我们也摆脱那个！
重要的部分是，它不应该是固定的像素宽度布局类型，如果数据不需要太多的空间，表格应该小于可用的宽度。所以总结起来，一个普通的桌子，不会比屏幕更宽。理想情况下，表只会拉伸父元素，直到达到包围元素的最大宽度，然后才能变宽。
在Chrome中，我认为是一个邪恶的黑客，我必须保持桌面的最大宽度可用，并在td上显示滚动条，如果需要的话。然而，这对于FF并不起作用，也不是解决方案可以被认为是正确的。
以下例子可以在https://hydra.geht.net/table-quirx.html找到一段时间：
<head>
<title>Obey max-width for table</title>
<style>
.nw { white-space:nowrap }
.quirx div { width:100%; max-width:100%; white-space:pre }
.quirx td { max-width:90px; border:1px solid black }
.quirx td+td { max-width:500px; overflow:auto }
table.quirx { width:100%; max-width:100%; border:1px solid black; border-collapse:collapse }
td { align:left; max-width:100% }
</style>
</head>
<body>
<table summary="" class="quirx"><tr><td colspan="3">
Just some info
</td></tr><tr><td>KEY</td><td><div>DATA (which might contain long lines PRE formatted) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</td></tr></table>
</body>
</html>
请注意，“colspan = 3”在这里没有错误，在我的应用程序中，有时第三列可能会显示，这在表格标题输出时是不可知的。 (有些风格的东西也是多余的)
上面的诀窍是，td的最大宽度一起比通常的屏幕(590px)小，然后表被拉伸到给定的宽度，这是100％。由于tds不会超出屏幕，内部div的溢出属性可以按预期工作。然而在FF中，它不会以这种方式工作，不论宽度还是最大宽度(这可能是由于它们的内联状态)。在Chrome中，宽度：100％或类似的效果不适用于td或tr元素。请注意，使用max-width可以获得比宽度更好的表格布局(我不明白这个区别)。
除了仅在Chrome中有效的错误之外，还有一个缺陷是，即使只有少量数据要显示，该表也将使用全屏幕宽度。
关于这一切的一些注释：
>我认为这是一个非常基本的事情，我很困惑，为什么看起来很难用CSS表达
>一个目标是保持它没有任何JavaScript，所以只有CSS与黑客
>用户可以调整窗口的大小，例如从800像素到1920像素，甚至更宽，因此表的宽度将自动跟随(无JavaScript)
>它应该在基于文本的浏览器(如Lynx和w3m)上显示出良好的效果
>输出不得过于混乱，以便从卷曲管道轻松解析
>它应该在主要的4(IE，FF，Chrome，Safari)上显示或多或少的正确
>它不能破坏别人(它可以渲染错误，但不能隐藏内容)
我真的不知道如何存档。也许这是一个FAQ，但我无法自己找到一个解决方案。
解决方法
我正在包括一些我测试HTML / CSS以实现我想要的标记(下面)。
有一个固定宽度的单元样式“固定单元”和流体宽度单元样式的“流体单元”。
我设置的固定宽度(这个例子为75px)很容易说明事情。
流体宽度有宽度：自动，因此它们填充剩余表空间的宽度;它们也重要的是具有空格：nowrap，所以文本不会扩展单元格的高度(白空间：pre works too);最后他们有溢出：隐藏，所以文本不会溢出的宽度，使事情丑陋，或者你可以设置溢出：滚动它有一个滚动条在这些单元格当/如果必要的话。
该表设置为100％宽度，因此它将根据需要扩展以适应屏幕/等。
关于表格风格的重要事情是表格布局：固定，这使表格更贴合布局的页面，而不是根据自己的内容自动调整大小(table-layout：auto)。
我还添加了一些边框来帮助说明表格和单元格的边界。
<html>
<head>
<title>Table with auto-width sizing and overflow hiding.</title>
<style type="text/css">
table {width:100%; border:solid 1px red; table-layout:fixed;}
table td {border:solid 1px green;}
.fixedcell {width:75px;}
.fluidcell {width:auto; overflow:hidden; white-space:nowrap;}
</style>
</head>
<body>
Table with one fluid column:
<table>
<tr>
<td class="fixedcell">row 1</td>
<td class="fluidcell">a whole bunch of content could go here and it still needs to fit nice into the cell without mucking things up</td>
<td class="fixedcell">fixie</td>
<td class="fixedcell">another</td>
</tr>
</table>
Table with two fluid columns:
<table>
<tr>
<td class="fixedcell">row 1</td>
<td class="fluidcell">a whole bunch of content could go here and it still needs to fit nice into the cell without mucking things up</td>
<td class="fluidcell">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td>
<td class="fixedcell">fixie</td>
<td class="fixedcell">another</td>
</tr>
</table>
</body>
我在几个现代浏览器中测试过，似乎在每个浏览器中都能正常工作。
PS。虽然表格一般是页面布局的no-no，但表格是正确的，并鼓励表格式的数据布局。
