我需要使用table
显示表格数据,但它将在流畅的布局中;我想让它填充整个可用宽度,但不要水平扩展超过最大屏幕宽度,这样body
不会得到水平滚动条。相反,过宽的td
元素将获得滚动条。
在示例中,DATA
中有table
,table
有border:1px solid black
,输出应该是为了在卷曲时也能轻松解析(因此white-space:pre
); div
只是普通的CSS布局助手,如果可能的话,我们也可以摆脱它!
重要的是,它应该没有固定的像素宽度布局类型,table
应小于可用宽度,以防数据不需要那么多空间。总而言之,一张普通的桌子不会比屏幕宽。理想情况下,table
只会延伸父元素,直到达到该封闭元素的max-width
,然后不会变宽。
在Chrome
中,我认为这是一个邪恶的黑客攻击,我必须将table
保持在可用的最大宽度,并在需要时在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”在这里没有错误,在我的应用中有时可能会出现第三列,这在输出table
标题时无法知道。 (有些风格的东西也是多余的。)
上面的诀窍是,td
的{{1}}一起小于通常的屏幕(max-width
),然后590px
被拉伸到给定的{ {1}},这是100%。由于table
不会延伸到屏幕之外,因此内部width
的{{1}}属性可以按预期工作。但是在FF中,这种方式不起作用,既不是td
也不是div
(这可能是由于overflow
- 状态)。在width
中,max-width
或类似内容不适用于inline
和Chrome
元素。请注意,使用width:100%
时,表格布局比使用td
更令人愉快(我不明白这种区别)。
除了仅在tr
中有效的错误之外,另一个错误是max-width
使用全屏宽度,即使只有小数据< / strong>显示。
关于这一切的一些注意事项:
width
的宽度将自动跟随(不使用JavaScript)Chrome
和table
等基于文本的浏览器上显示效果table
我真的不知道如何存档。也许这是一个FAQ,但我自己无法找到解决方案。
答案 0 :(得分:18)
(我的答案比预期的要晚一点,但也许对你或其他人来说非常有用......
我在测试HTML / CSS时使用了一些标记(下面)来实现我认为你想要的。
有一个固定宽度的单元格样式“fixedcell”和流体宽度单元格样式“fluidcell”。
我将固定宽度设置为固定宽度(本例中为75px),这样可以更好地说明事情。
流体宽度为 width:auto ,因此它们填充剩余表空间的宽度;它们也非常重要地具有 white-space:nowrap ,因此文本不会在高度上扩展单元格( white-space:pre 也可以);最后他们有溢出:隐藏所以文字不会溢出宽度并使事情变得丑陋,或者你可以设置溢出:滚动让它在那些中有一个滚动条在必要的时候。
表格设置为100%宽度,因此它会根据需要扩展以适应屏幕/等。 关于表格样式的重要事项是 table-layout:fixed ,这使得表格更加正确地遵循页面布局,而不是根据自己的内容自动调整页面大小(表格 - 布局:自动)
我还添加了一些边框来帮助说明表格和单元格的边界。
<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。虽然表格通常是页面布局的禁忌,但表格是正确的,鼓励表格数据布局。