Html Bootstrap 水平滚动表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22560208/
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
Bootstrap Horizontal Scrollable Table
提问by zazvorniki
I have been struggling with this for a while now. I have a table in bootstrap that if it gets to wide I would like to make it scrollable so they can at least scroll to see the information.
我已经为此苦苦挣扎了一段时间。我在引导程序中有一个表格，如果它变宽，我想让它可以滚动，这样他们至少可以滚动查看信息。
My html is pretty simple just a table within a box
我的 html 非常简单，只是一个盒子中的表格
<div class='box'>
<div class='box-header'>
<h4>Title</h4>
</div>
<div class='box-content'>
<table>
<!--Table Stuff-->
</table>
</div>
</div>
and I have tries the usual of setting a widthand then an overflow-x:scroll;like so
我已经尝试了通常的设置 awidth然后overflow-x:scroll;像这样
table{
width:100px;
max-width:100px;
overflow-x:scroll;
}
but nothing seems to work.
但似乎没有任何效果。
I have a jsFiddle set up here. http://jsfiddle.net/AHyuF/3/
我在这里设置了一个 jsFiddle。http://jsfiddle.net/AHyuF/3/
Any help would be much, much appreciated!
任何帮助将不胜感激，不胜感激！
回答by Bilal Inamdar
or else you just have to add class "table-responsive" to table div
否则你只需要table-responsive在表中添加类“ ”div
<div class = "table-responsive">
</div>
It will make table scrollable.
它将使表格可滚动。
回答by Zim
Put the max width overflow on the tableScrolldiv (container) instead...
将最大宽度溢出放在tableScrolldiv（容器）上...
.tableScroll{
width:200px;
max-width:200px;
overflow-x:scroll;
}
回答by user1887686
Finally found a solution to table horizontal scrolling for Bootstrap 2.3.2, which I'd like to share. Can't take credit for it though; that goes to James Chambers, author of Bootstrapping MVC.
终于找到了Bootstrap 2.3.2表格水平滚动的解决方案，我想分享一下。但不能因此而受到赞扬；这要归功于 Bootstrapping MVC 的作者 James Chambers。
Just add this to your custom CSS file.
只需将其添加到您的自定义 CSS 文件中即可。
.table-responsive
{
width: 100%;
margin-bottom: 15px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #000000;
}
回答by Deepak Bansode
Please put style overflow-x: scroll;to the parent element of table, in this case <div class='box-content'>.
请将样式放在overflow-x: scroll;表格的父元素中，在本例中为<div class='box-content'>。
Here is the jsFiddle link : http://jsfiddle.net/AHyuF/38/
这是 jsFiddle 链接：http: //jsfiddle.net/AHyuF/38/
回答by Bilal Inamdar
Keep the table width as
保持表格宽度为
table{
width:200px;
max-width:200px;
overflow-x:scroll;
}
and add some more to table div class .box-content
并向表 div 类 .box-content 添加更多内容
.box-content {overflow-x:auto;}
it will work. Please let me know if it works.
它会起作用。请让我知道它是否有效。
