Html 如何将表格宽度限制为包含元素（或屏幕）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4915661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I limit the table width to the containing element (or screen)?
提问by Tino
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 bodydoes not get a horizontal scrollbar. Instead the too wide tdelements shall get the scrollbar.
我需要使用 a 显示表格数据table，但它将在流体布局中；我想让它填满整个可用宽度，但不要水平扩展超过最大屏幕宽度，这样body就不会得到水平滚动条。相反，太宽的td元素将获得滚动条。
In the example there is DATAin the table, the tablehas border:1px solid blackand the output shall be for easy parsing when piped from curl as well (hence the white-space:pre); The divis just the normal CSS layout helper, if possible let's get rid of that, too!
在示例DATA中table，当从 curl 管道传输时，tablehasborder:1px solid black和输出也应便于解析（因此是white-space:pre）；这div只是普通的 CSS 布局助手，如果可能的话，让我们也摆脱它！
The important part is, that it shall be no fixed pixel width layout type, and the tableshall be smaller than the available width in case the datadoes not need that much room. So to sum it up, a plain table which just does not get wider than the screen. Ideally the tablewould only stretch the parental element until the max-widthof that enclosing element is reached and then do not get wider.
重要的是，它应该是没有固定像素宽度的布局类型，并且table应该小于可用宽度，以防数据不需要那么多空间。总而言之，一张普通的桌子不会比屏幕更宽。理想情况下，table只会拉伸父元素，直到max-width达到该封闭元素的 ，然后不会变宽。
In Chrome, with something I consider to be an evil hack, I got to keep the tableat the maximum width available and to display the scrollbars on the tdif needed. However this does not work for FF, nor is that solution something which can be considered a correct one.
在 中Chrome，我认为这是一个邪恶的黑客，我必须保持table可用的最大宽度，并在td需要时在 上显示滚动条。然而，这对 FF 不起作用，该解决方案也不是可以被认为是正确的解决方案。
Following example of that can be found at https://hydra.geht.net/table-quirx.htmlfor a while:
下面的例子可以在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>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 tableheader is output. (Some style things are redundant, too.)
请注意，“colspan=3”在这里没有错误，在我的应用程序中，有时可能会显示第三列，在table输出标题时无法知道。（一些风格的东西也是多余的。）
The trick above is, that the td's max-widthtogether are smaller than the usual screen (590px) and the tablethen is stretched to the given width, which is 100%. As the tds do not stretch beyond the screen, the inner div's overflowproperty can work as expected. However in FF it does not work this way, neither with widthnor with max-width(which is probably due to their inline-status). In Chromea width:100%or similar does not work on the tdnor the trelements. Note that with max-widthone gets a more pleasant table layout than with width(I do not understand that difference).
上面的技巧是，td'smax-width的总和比通常的屏幕 ( 590px) 小，table然后被拉伸到给定的width100%。由于tds 不会超出屏幕，因此 innerdiv的overflow属性可以按预期工作。然而，在 FF 中，它不会以这种方式工作，无论是 withwidth还是 with max-width（这可能是由于它们的inline-status）。在Chromeawidth:100%或类似td的tr元素上不起作用。请注意， with max-widthone 比 with 更令人愉快的表格布局width（我不明白这种区别）。
Besides the bug that this only works in Chrome, another bug is, that the tableuses the full screen-width even if that is not needed if there is only small datato display.
除了这只适用于 的错误之外Chrome，另一个错误是，table即使只有小数据要显示，也不需要使用全屏宽度。
Some notes about that all:
关于这一切的一些注意事项：
- 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)
- 我认为这是一个非常基本的东西，我很困惑为什么用 CSS 表达似乎如此困难
- 一个目标是让它不受任何 JavaScript 的影响，所以只有带有 hacks 的 CSS
- 用户可以调整窗口大小，例如从 800px 到 1920px 甚至更宽，因此
table的宽度将自动跟随（不使用 JavaScript） - 它应显示在如基于文本浏览器好
Lynx和w3m，太 - 输出不应太杂乱，以便在从管道传输时轻松解析
curl - 它应该或多或少地在主要 4（IE、FF、Chrome、Safari）上正确显示
- 它不会破坏其他人（它可以有渲染错误，但不能隐藏内容）
I really have no idea how to archive that. Perhaps it's a FAQ, but I was unable to spot a solution myself.
我真的不知道如何存档。也许这是一个常见问题解答，但我自己无法找到解决方案。
回答by devlop
I'm including some markup below that tests the HTML/CSS to achieve what I believe you want.
我在下面包含了一些测试 HTML/CSS 以实现我认为您想要的标记的标记。
There is a fixed-width cell style .fixedcelland fluid width cell style .fluidcell. I've set a fixed width (75px for this example) simply to illustrate things better.
有固定宽度的单元格样式.fixedcell和流体宽度的单元格样式.fluidcell。我设置了一个固定宽度（在这个例子中为 75px）只是为了更好地说明事情。
The fluid width ones have width:autoso they fill the width of the remaining table space; they also importantly have white-space:nowrapso the text doesn't expand the cell height-wise (white-space:preworks too); and finally they have overflow:hiddenso the text doesn't overflow the width and make things ugly, alternatively you could set overflow:scrollfor it to have a scrollbar in those cells when/if necessary.
流体宽度具有，width:auto因此它们填充剩余表空间的宽度；它们也很重要，white-space:nowrap因此文本不会在高度上扩展单元格（white-space:pre也可以）；最后他们有overflow:hidden所以文本不会溢出宽度并使事情变得丑陋，或者你可以设置overflow:scroll以便在/如果需要时在这些单元格中有一个滚动条。
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).
表格设置为 100% 宽度，因此它会根据需要扩展以适应屏幕/等。关于表格样式的重要事情是table-layout:fixed，这使表格坚持页面的布局，而不是根据自己的内容自动调整大小 ( 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.
附注。虽然表格一般来说是页面布局的禁忌，但表格是正确的，并且鼓励表格数据布局。
