Html 固定宽度的列表强制在容器上展开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7410321/
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
Fixed-width column table force expand on container
提问by Ben
Apparently a classic problem, but the "solutions" I've found haven't worked, including various other questions on SO.
显然是一个经典问题，但我发现的“解决方案”没有奏效，包括关于 SO 的各种其他问题。
If my table is wider than its container, I want my table cell width to remain fixed and not be resized to fit the container.
如果我的桌子比它的容器宽，我希望我的表格单元格宽度保持固定，而不是调整大小以适应容器。
Reproducible HTML (<td>s generated with PHP):
可重现的 HTML（<td>用 PHP 生成）：
<html>
<head></head>
<body>
<table>
<tr>
<?php for($i=0;$i<15;$i++) {
echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>";
} ?>
</tr>
</table>
<div style='background:chartreuse;width:150px'>This is 150px wide.</div>
</body>
</html>
What I've tried:
我试过的：
table-layout:fixedspancontainer withdisplay:inline-blocksetdivcontainer with inline block
table-layout:fixedspan带display:inline-block套装的容器div带有内联块的容器
It seems there should be an easy way to make the previous code generate a table that overflows the body.
似乎应该有一个简单的方法可以让前面的代码生成一个溢出主体的表。
Can someone help?
有人可以帮忙吗？
Edit
编辑
It may not be clear from my previous wording, but I want to specify column width myself.
从我之前的措辞可能不清楚，但我想自己指定列宽。
I'm trying to do this without specifying an explicit width for the table. Only the TDs will force the table wider, which (should?) force the container wider.
我试图在没有为表格指定显式宽度的情况下执行此操作。只有 TD 会迫使桌子变宽，这（应该？）迫使容器变宽。
Also, the inline CSS is there for example purposes only.
此外，内联 CSS 仅用于示例目的。
回答by Bala
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="margin: 0pt auto; width: 980px;">
<div style="500px;overflow:scroll">
<table style="width: 100%; table-layout: fixed;">
<tbody>
<tr>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
<td style="width:150px;border-right:1px solid black;">This is 150px wide.</td>
</tr>
</tbody>
</table>
<div style="background:chartreuse;width:150px">This is 150px wide.</div>
</div>
</div>
</body>
</html>
回答by Ben
Using my HTML in my question, here's the correct markup, compliments of @Bala.
在我的问题中使用我的 HTML，这是正确的标记，@Bala 的赞美。
<html>
<head></head>
<body>
<table style='table-layout:fixed;width:100%'>
<tr>
<?php for($i=0;$i<15;$i++) { echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>"; } ?>
</tr>
</table>
<div style='background:chartreuse;width:150px'>This is 150px wide.</div>
</body>
</html>
