在示例中,表中有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)上显示或多或少的正确
>它不能破坏别人(它可以渲染错误,但不能隐藏内容)
解决方法
我正在包括一些我测试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,但表格是正确的,并鼓励表格式的数据布局。