如何将表格宽度限制为包含元素(或屏幕)? [英] How do I limit the table width to the containing element (or screen)?
问题描述
我需要使用 table 来显示表格数据，但它会在一个流畅的布局中；我想让它填充整个可用宽度，但不要水平扩展超过最大屏幕宽度，这样 body 就没有水平滚动条.相反，太宽的 td 元素将获得滚动条.
I need to show tabular data using a table, but it will be within a fluid layout; I want to have a it fill the entire available width but not to expand horizontally beyond maximum screen-width, such that the body does not get a horizontal scrollbar. Instead the too wide td elements shall get the scrollbar.
在例子中，table中有DATA，table有border:1px solid black和当从 curl 管道传输时，输出也应便于解析(因此 white-space:pre)；div 只是普通的 CSS 布局助手，如果可能的话，让我们也摆脱它！
In the example there is DATA in the table, the table has border:1px solid black and the output shall be for easy parsing when piped from curl as well (hence the white-space:pre); The div is just the normal CSS layout helper, if possible let's get rid of that, too!
重要的是，它应该是没有固定像素宽度的布局类型，并且table应该小于可用宽度，以防数据不需要那么多房间.总而言之，一张普通的桌子不会比屏幕更宽.理想情况下，table 只会拉伸父元素，直到达到该封闭元素的 max-width，然后不会变宽.
The important part is, that it shall be no fixed pixel width layout type, and the table shall be smaller than the available width in case the data does not need that much room. So to sum it up, a plain table which just does not get wider than the screen. Ideally the table would only stretch the parental element until the max-width of that enclosing element is reached and then do not get wider.
在 Chrome 中，我认为这是一个邪恶的黑客，我必须将 table 保持在可用的最大宽度，并在 上显示滚动条>td 如果需要.但是，这对 FF 不起作用，该解决方案也不是正确的解决方案.
In Chrome, with something I consider to be an evil hack, I got to keep the table at the maximum width available and to display the scrollbars on the td if needed. However this does not work for FF, nor is that solution something which can be considered a correct one.
可以在 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% }<head>
<title>Obey max-width for table</title>
</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>请注意，这里的colspan=3"没有错误，在我的应用程序中，有时可能会显示第三列，在输出 table 标题时无法知道这一点.(有些风格的东西也是多余的.)
Note that the "colspan=3" is no error here, in my app sometimes a third column may show up, this cannot be known at the time the table header is output. (Some style things are redundant, too.)
上面的技巧是，td 的 max-width 一起小于通常的屏幕 (590px) 和 table 然后被拉伸到给定的 width，即 100%.由于 td 不会超出屏幕，因此内部 div 的 overflow 属性可以按预期工作.然而，在 FF 中它不能这样工作，无论是 width 还是 max-width(这可能是由于它们的 inline-status).在 Chrome 中，width:100% 或类似的元素不适用于 td 和 tr 元素.请注意，使用 max-width 可以获得比使用 width 更令人愉悦的表格布局(我不明白这种区别).
The trick above is, that the td's max-width together are smaller than the usual screen (590px) and the table then is stretched to the given width, which is 100%. As the tds do not stretch beyond the screen, the inner div's overflow property can work as expected. However in FF it does not work this way, neither with width nor with max-width (which is probably due to their inline-status). In Chrome a width:100% or similar does not work on the td nor the tr elements. Note that with max-width one gets a more pleasant table layout than with width (I do not understand that difference).
除了仅适用于 Chrome 的错误之外，另一个错误是 table 使用全屏宽度，即使不需要，如果只有要显示的小数据.
Besides the bug that this only works in Chrome, another bug is, that the table uses the full screen-width even if that is not needed if there is only small data to display.
关于这一切的一些注意事项:
Some notes about that all:
- 我认为这是一个非常基本的东西，我很困惑为什么用 CSS 表达似乎如此困难
- 一个目标是让它没有任何 JavaScript，所以只有 CSS 和 hacks
- 用户可以调整窗口大小，例如从 800px 到 1920px 甚至更宽，因此
table的宽度将自动跟随(无需 JavaScript) - 它也应该在基于文本的浏览器(如
Lynx和w3m)上显示良好 - 当从
curl 管道传输时，输出不应太混乱以便于解析 - 它应该或多或少地在主要 4(IE、FF、Chrome、Safari)上正确显示
- 不得破坏他人(可能存在渲染错误，但不得隐藏内容)
- I think this here is a very basic thing and I am puzzled why it seems so hard to express with CSS
- A goal is to keep it free of any JavaScript, so only CSS with hacks
- The user can resize the window, for example from 800px to 1920px or even wider, and so the
table's width shall automatically follow (without JavaScript) - It shall display good on text based browsers like
Lynxandw3m, too - Output shall not be too cluttered for easy parsing when piped from
curl - It shall display more or less properly on the major 4 (IE, FF, Chrome, Safari)
- It shall not break on others (it can have render bugs, but content must not be hidden)
我真的不知道如何存档.也许这是一个常见问题解答，但我自己无法找到解决方案.
I really have no idea how to archive that. Perhaps it's a FAQ, but I was unable to spot a solution myself.
推荐答案
我在下面包含了一些测试 HTML/CSS 以实现我认为您想要的标记.
I'm including some markup below that tests the HTML/CSS to achieve what I believe you want.
有固定宽度的单元格样式 .fixedcell 和可变宽度的单元格样式 .fluidcell.我设置了一个固定宽度(在这个例子中为 75px)只是为了更好地说明事情.
There is a fixed-width cell style .fixedcell and fluid width cell style .fluidcell. I've set a fixed width (75px for this example) simply to illustrate things better.
流体宽度具有width:auto，因此它们填充剩余表空间的宽度；他们还重要的是有 white-space:nowrap 所以文本不会扩展单元格的高度(white-space:pre 也可以)；最后他们有 overflow:hidden 所以文本不会溢出宽度并使事情变得丑陋，或者你可以设置 overflow:scroll 让它在那些中有滚动条必要时/如有必要.
The fluid width ones have width:auto so they fill the width of the remaining table space; they also importantly have white-space:nowrap so the text doesn't expand the cell height-wise (white-space:pre works too); and finally they have overflow:hidden so the text doesn't overflow the width and make things ugly, alternatively you could set overflow:scroll for it to have a scrollbar in those cells when/if necessary.
表格设置为 100% 宽度，因此它会根据需要扩展以适应屏幕/等.而关于表格样式的重要事情是 table-layout:fixed，这使得表格坚持页面的布局，而不是根据自己的内容自动调整大小(table-layout:auto).
The table is set to be 100% width so it will expand to fit the screen/etc as needed. And the important thing regarding the table's style is the table-layout:fixed, this makes the table adhere to the layout of the page rather than auto-sizing itself based on its own content (table-layout:auto).
我还添加了一些边框来帮助说明表格和单元格的边界.
I also added some borders to help illustrate the boundaries of the table and cells.
<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>我在几个现代浏览器中对其进行了测试，似乎在每个浏览器中都能正常工作.
I tested it in several modern browsers and seemed to work correctly in each.
附注.虽然表格一般来说是页面布局的禁忌，但表格是正确的，并且鼓励表格数据布局.
PS. Although tables are a no-no for page layout in general, tables are correct and encouraged for tabular data layout.
这篇关于如何将表格宽度限制为包含元素(或屏幕)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
