Tin*_*ino 17 html css html-table
我需要使用a显示表格数据table,但它将在流畅的布局中; 我想让它填充整个可用宽度,但不要水平扩展超过最大屏幕宽度,这样body就不会得到水平滚动条.相反,太宽的td元素将获得滚动条.
在示例DATA中table,tablehas border:1px solid black和输出应当在从curl传输时进行简单的解析(因此white-space:pre); 这div只是普通的CSS布局助手,如果可能的话,我们也可以摆脱它!
重要的是,它应该没有固定的像素宽度布局类型,并且在数据不需要那么多空间的table情况下应小于可用宽度.总而言之,一张普通的桌子不会比屏幕宽.理想情况下,只会延伸父元素,直到达到该封闭元素,然后不会变宽.tablemax-width
在Chrome我认为是一个邪恶的黑客的东西,我必须保持table在可用的最大宽度,并在需要时显示滚动条td.然而,这对FF不起作用,也不是可以被认为是正确的解决方案.
以下示例可以在https://hydra.geht.net/table-quirx.html找到一段时间:
.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% }请注意,"colspan = 3"在这里没有错误,在我的应用程序中有时会显示第三列,这在table输出标题时无法知道.(有些风格的东西也是多余的.)
以上诀窍是,所述td的max-width共同比通常的屏幕较小(590px),并且table然后被拉伸到给定的width,这是100%.由于tds不会延伸到屏幕之外,内部div的overflow属性可以按预期工作.然而在FF中,它不能以这种方式工作,无论是用width还是用max-width(这可能是由于它们的inline-status).在Chrome一个width:100%或类似的不起作用td的tr元素.请注意,max-width一个人获得的表格布局比使用表格更令人愉快width(我不明白这一点).
除了这个唯一有效的错误之外Chrome,另一个错误是,table如果只显示小数据,即使不需要全屏宽度也是如此.
关于这一切的一些说明:
table宽度将自动跟随(不使用JavaScript)Lynx和w3m,太curl我真的不知道如何存档.也许这是一个FAQ,但我自己无法找到解决方案.
dev*_*lop 20
(我的答案比预期的要晚一点,但也许对你或其他人来说也是有用的......
我在测试HTML/CSS时使用了一些标记(下面)来实现我认为你想要的东西.
存在固定宽度的单元式"固定单元"和流体宽度单元式"流体单元".
我将固定宽度设置为固定宽度(本例中为75px),这样可以更好地说明事情.
流体宽度为宽度:自动,因此它们填充剩余表空间的宽度; 它们也很重要的是具有白色空间:nowrap所以文本不会在高度上扩展单元格(白色空间:也可以预先工作); 最后它们有溢出:隐藏所以文本不会溢出宽度并使事情变得丑陋,或者你可以设置溢出:滚动它以便在/必要时在这些单元格中有一个滚动条.
该表设置为100%宽度,因此它将根据需要扩展以适应屏幕/等.关于表格样式的重要事情是表格布局:固定,这使得表格更加正确地遵循页面布局,而不是根据自己的内容(表格布局:自动)自动调整页面大小.
我还添加了一些边框来帮助说明表格和单元格的边界.
<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>
</html>我在几个现代浏览器中测试过它,似乎在每个浏览器中都能正常工作
PS.虽然表格通常是页面布局的禁忌,但表格是正确的,并鼓励表格数据布局.