Html Bootstrap 3 表 - 表响应不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26394072/
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 3 table - table-responsive not working
提问by Daniel Olsen
I'm using bootstrap 3 for a website project. I'm trying to create a page with a responsive table, so that I'd have the scrollbar when the table is too big. I made a test case like so:
我正在将引导程序 3 用于网站项目。我正在尝试创建一个带有响应式表格的页面，以便在表格太大时使用滚动条。我做了一个这样的测试用例：
<div class="row">
<h4>Nuv?rende kurser</h4>
<div class="col-12 col-sm-12 col-lg-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
</div><!-- end col-12 -->
</div><!-- end row -->
Now, the problem is that it doesn't add the scrollbar, it merely expands the website to the width of the table.
现在，问题是它没有添加滚动条，它只是将网站扩展到表格的宽度。
See a screenshot here:
在此处查看屏幕截图：
I've seen it working on several other websites, so something I'm doing...is wrong.
我已经看到它在其他几个网站上工作，所以我正在做的事情......是错误的。
回答by Savan Kachhiya Patel
Replace your table-responsive with this
用这个替换你的 table-responsive
<div class='table-responsive'> -> <div style="overflow-x:auto;">
回答by Hamza AVvan
Make sure to set your table display block
确保设置您的表格显示块
.table {
display: block !important;
}
回答by Nate Levine
bootstrap's table-responsive works fine in sandbox environments, but it is buggy on live environments. The reason for the bug is that bootstrap gives table-responsive styles of width: 100% and overflow-y: hidden. These two styles do not play nice together. Overflow hiding works best when there is a fixed or max-width. I gave table-responsive a max-width: 270px; for mobile devices, and that fixed the bug.
bootstrap 的 table-responsive 在沙盒环境中工作正常，但在实时环境中却有问题。错误的原因是 bootstrap 提供了表格响应样式 width: 100% 和 overflow-y: hidden。这两种风格不能很好地搭配在一起。当有固定或最大宽度时，溢出隐藏效果最好。我给了 table-responsive 一个 max-width: 270px; 用于移动设备，并修复了该错误。
回答by ben.kaminski
You're code is fine. I just set up a fiddle here.
你的代码很好。我只是在这里设置了一个小提琴。
Works there!
在那里工作！
I literally copied and pasted your code. Are you sure your links to Bootstrap's Javascript file and CSS file are working?
我从字面上复制并粘贴了您的代码。您确定指向 Bootstrap 的 Javascript 文件和 CSS 文件的链接有效吗？
<div class="row">
<h4>Nuv?rende kurser</h4>
<div class="col-12 col-sm-12 col-lg-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
</div><!-- end col-12 -->
</div><!-- end row -->
回答by Evgeniy Miroshnichenko
I'v done it.
我做到了。
<div style="display: table">
<div style="display: table-row">
<div style="display: table-cell">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
//wrapper that will give opportunity to use: overflow-x: auto;
<table style="table-layout: fixed; width: 100%;">
<tr>
<td>
//SCROLL
<div style="width: 100%; overflow-x: auto;">
//table, that shoud have "table-responsive" bootstrap class effect
<table class="table table-hover">
//...table content...
</table>
</div>
<td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
You will receive at xs-screen (example from my app):
您将在 xs-screen 收到（来自我的应用程序的示例）：
回答by Andrew Dant
I had this problem and found that it worked to either give the table a set width in px, or to set the table to display: block.
我遇到了这个问题，并发现它可以为表格提供以 px 为单位的设置宽度，或者将表格设置为显示：块。
回答by fatihdemir
You can use FooTable. It is a jQuery plugin that allows you to resize and redistribute the data within your tables to best suite your current breakpoint.
您可以使用 FooTable。它是一个 jQuery 插件，允许您调整表中的数据大小和重新分配数据，以最适合您当前的断点。
回答by tahaerden
For me it was the 'min-width' value in body element breaking the responsiveness of this class.
对我来说，它是 body 元素中的 'min-width' 值打破了这个类的响应能力。
回答by Esteban Andrés Rodríguez Leiva
In my code, I did add a CSS class:
在我的代码中，我确实添加了一个 CSS 类：
.modal-body{
max-width:95vw;
}
The layout did work for sm
布局确实适用于 sm
回答by mohammad reza Batooei
Try this
remove <div class="table-responsive">...</div>
and move class table-responsive in <div class="col-12 col-sm-12 col-lg-12">
试试这个
删除<div class="table-responsive">...</div>
和移动类表响应<div class="col-12 col-sm-12 col-lg-12">
example <div class="col-12 col-sm-12 col-lg-12 table-responsive">
this 100% work but if dont work move class table-responsive to Earlier Div layer,
In this case,<div class="col-12 col-sm-12 col-lg-12">
must be removed.
例如<div class="col-12 col-sm-12 col-lg-12 table-responsive">
这 100% 工作，但如果不工作移动类表响应到早期的 Div 层，在这种情况下，<div class="col-12 col-sm-12 col-lg-12">
必须删除。
