Html 表格单元格内的 CSS 100% 宽度滚动条 (overflow-x)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15855689/
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
CSS 100% width scrollbar (overflow-x) within a table cell
提问by Gerard
it's my first post. Finally I decided to join you all at stackoverflow!
这是我的第一篇文章。最后我决定在stackoverflow加入你们！
My problem is about an horizontal scrollbar which has to fit 100% to its container. In the following example you'll find everything you need to understand my problem.
我的问题是关于水平滚动条，它必须 100% 适合其容器。在以下示例中，您将找到理解我的问题所需的一切。
So the question would be: why the code works fine in first case but when nested within a table cell (second case) then the scrollbar overflows its container? Why this happens and how could it be fixed? One could say: "just get rid of tables", but I need this code working in a big site which has some table layout. Getting rid of tables would represent for me hundred hours of work.
所以问题是：为什么代码在第一种情况下可以正常工作，但是当嵌套在表格单元格（第二种情况）中时，滚动条会溢出其容器？为什么会发生这种情况，如何解决？有人可以说：“去掉表格”，但我需要这段代码在一个有一些表格布局的大站点中工作。摆脱桌子对我来说意味着数百小时的工作。
Main difference between first (correct) and second scrollb (incorrect) is:
第一个（正确）和第二个 scrollb（不正确）之间的主要区别是：
First scroll (correct)
第一次滚动（正确）
<div class="hscroll"> (images) </div>
CSS code of the horizontal scroll:
水平滚动的 CSS 代码：
.hscroll {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}
Second scroll (incorrect)
第二卷（错误）
<table><tr><td> (same code as first scroll) </td></tr></table>
I'll appreciate your wise suggestions very much.
我将非常感谢您的明智建议。
Gerard.
杰拉德。
回答by Michael Theriot
table { table-layout: fixed; }
table { table-layout: fixed; }
Making the table fixed solved it for me.
固定桌子为我解决了这个问题。
Edit: seems I'm a few seconds too late!
编辑：似乎我来晚了几秒钟！
回答by Kaloyan
Add table-layout: fixed;to your .tableclass.
添加table-layout: fixed;到您的.table班级。
.table{width:100%;margin-top:50px; table-layout: fixed; }
Here's an example:
下面是一个例子：
