如何使HTML表格自动宽度但大于屏幕？

Question

我有一个宽表 - 可能非常宽 - 我希望表格尽可能宽，以适应所有内容，即 - 如果宽度为auto（屏幕更宽）。

但是，默认情况下，表格似乎永远不会超过其容器的大小！

我找到了一个使用JavaScript的答案，但是还有纯CSS答案吗？或者更好的JavaScript解决方案？

Here's a JSFiddle fiddle with an example table。请注意，在此示例中，内容 大于“屏幕”，但是所需的效果应该导致单元格的宽度足够大，以便每个单元格的文本都在一行上

Per GChabot's answer，我不希望细胞大于它们的内容。根据他们随后的评论，通过“适合一切”，我当然指的是Goldilocks合适，即足以使内容不包裹，但不会更大。

Answer 1

设置单元格，使它们不包裹

td { white-space: nowrap; }

Answer 2

根据“适合所有内容”的含义，您可能需要为td定义最小宽度：

min-width:250px;

这样，每个单元格都有一个合理的大小，可以在一行或多行上显示一些文本（如果你将它们设置为nowrap，只需要一行，如epascarello建议的那样）。如果要显示固定大小的元素（例如图像），则表格应默认展开。

Answer 3

CSS溢出应解决您的问题，请查看此帖子http://css-tricks.com/the-css-overflow-property/

Answer 4

这是我现在使用的快速和脏的JavaScript：

$('#table-container').attr('style', 'width: 1000%');
$('#table-container').attr('style', 'width: ' + $('#tblMain').width() + 'px;');

#table-container指的是围绕桌子的div;该表的id为tblMain。

我知道如果表格比当前屏幕尺寸宽10倍，这将不起作用，但一般的解决方案应该很容易实现。