Html Bootstrap/CSS 中的水平滚动表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19870743/
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
Horizontal Scroll Table in Bootstrap/CSS
提问by Randal Cunanan
How could I make it so that a table inside a container with its own width does not follow the width of the container and instead, retain the table's width when it's not inside the container. I have a very wide table that I want to fit inside a col-md-9 container and it displays bad because it squeezes the table to fit to the container. I have tried min-widthfor the table but it is not flexible as adding more columns to my table will squeeze it again. Would it be possible to make the table's width auto while not following the parent's width?
我如何才能使容器内具有自己宽度的表格不跟随容器的宽度，而是在表格不在容器内时保留表格的宽度。我有一个很宽的桌子，我想放在 col-md-9 容器内，它显示不好，因为它挤压桌子以适应容器。我已经尝试min-width过表格，但它不灵活，因为向表格中添加更多列会再次挤压它。是否可以在不遵循父级宽度的情况下使表格的宽度为自动？
<div class="col-md-9" style="overflow-x: auto">
<table class="table table-bordered" style="width:auto">
<tbody>
<tr>
.... contents
</tr>
<tbody>
</table>
</div>
回答by David Taiaroa
Here is one possiblity for you if you are using Bootstrap 3
如果您使用 Bootstrap 3，这里有一种可能
live view: http://fiddle.jshell.net/panchroma/vPH8N/10/show/
实时视图：http: //fiddle.jshell.net/panchroma/vPH8N/10/show/
edit view: http://jsfiddle.net/panchroma/vPH8N/
编辑视图：http: //jsfiddle.net/panchroma/vPH8N/
I'm using the resposive table code from http://getbootstrap.com/css/#tables-responsive
我正在使用来自http://getbootstrap.com/css/#tables-responsive的响应表代码
ie:
IE：
<div class="table-responsive">
<table class="table">
...
</table>
</div>
回答by Mahesh J
You can also check for bootstrap datatable plugin as well for above issue.
您还可以检查引导数据表插件以及上述问题。
It will have a large column table scrollable feature with lot of other options
它将具有大列表可滚动功能和许多其他选项
$(document).ready(function() {
$('#example').dataTable( {
"scrollX": true
} );
} );
for more info with example please check out this link
有关示例的更多信息，请查看此链接
回答by Sonobor
@Ciwan. You're right. The table goes to full width (much too wide). Not a good solution. Better to do this:
@慈万。你是对的。桌子变成全宽（太宽了）。不是一个好的解决方案。最好这样做：
css:
css：
.scrollme {
overflow-x: auto;
}
html:
html：
<div class="scrollme">
<table class="table table-responsive"> ...
</table>
</div>
Edit: changing scroll-y to scroll-x
编辑：将 scroll-y 更改为 scroll-x
