[英]CSS 100% width scrollbar (overflow-x) within a table cell
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. 我的问题是关于一个水平滚动条,它必须100%适合它的容器。 In the following example you'll find everything you need to understand my problem. 在以下示例中,您将找到理解我的问题所需的一切。
http://jsfiddle.net/cexUr http://jsfiddle.net/cexUr
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: 第一个(正确)和第二个滚动(不正确)之间的主要区别是:
<div class="hscroll"> (images) </div>
CSS code of the horizontal scroll: 水平滚动的CSS代码:
.hscroll {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}
<table><tr><td> (same code as first scroll) </td></tr></table>
I'll appreciate your wise suggestions very much. 我非常感谢你的明智建议。
Gerard. 杰拉德。
table { table-layout: fixed; }
Making the table fixed solved it for me. 使桌子固定解决了我。
Edit : seems I'm a few seconds too late! 编辑 :好像我来晚了几秒钟!
Add table-layout: fixed;
添加table-layout: fixed;
to your .table
class. 你的.table
课程。
.table{width:100%;margin-top:50px; table-layout: fixed; }
Here's an example: 这是一个例子:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.