twitter-bootstrap 容器 div 内的引导表超出浏览器宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43483030/
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 table inside container div is out of browser width
提问by meskerem
I have a boostrap containerdiv and inside it, I have a table:
我有一个 boostrap containerdiv，里面有一张桌子：
<table id="reviewer_table" class="table table-hover table-striped table-condensed tasks-table">
<thead>
// tr/td ...
</tbody>
</table>
But for some reason, this table is too wide, that one column is actually outside of the right screen.
但是由于某种原因，这张表太宽了，一列实际上在右屏幕之外。
I am not sure what is causing the issue, so I am sharing the code to know if I am doing something wrong.
我不确定是什么导致了这个问题，所以我分享了代码以了解我是否做错了什么。
回答by J. Shabu
Please add following div before your table
请在您的表格前添加以下 div
<div class="table-responsive">
Your table
</div>
回答by Sia
I also came across this problem. I think it happens when the content in the table (like long strings) extends further than the container is wide. This postby CSS-Tricks helped me understand.
我也遇到了这个问题。我认为当表格中的内容（如长字符串）延伸得比容器宽时会发生这种情况。CSS-Tricks 的这篇文章帮助我理解了。
To fix it, I added table layout fixed to my CSS for the <table>like so (I only specified this for one use case with a class of speaker-list):
为了修复它，我添加了固定到我的 CSS 的表格布局，<table>例如（我只为一个具有 类的用例指定了这个speaker-list）：
table.speaker-list {
table-layout: fixed;
}
It defaults to equal-width columns, so you can put classes on the table headers <th>to specify different widths like 10% vs 40%. The CSS-tricks article has great examples.
它默认为等宽列，因此您可以在表格标题上放置类<th>以指定不同的宽度，例如 10% 与 40%。CSS-tricks 文章有很好的例子。
回答by R. Saranya
Add a class table-responsivein the table's parent div to achieve a responsive table.
table-responsive在表的父div中添加一个类，实现响应式表。
回答by Alex Olivieri
Bootstrap 4: add table-responsive in the table element and it will make the table to stay inside the div. The table will become horizontally scrollable
Bootstrap 4：在 table 元素中添加 table-responsive，它将使 table 留在 div 内。表格将变为可水平滚动
<table class="table table-responsive">
回答by Mariano W.
Maybe post the whole code of your table, as it is perfectly working for me.
也许发布你的表的整个代码，因为它对我来说非常有用。
<div class="container">
<table id="reviewer_table" class="table table-hover table-striped table-condensed tasks-table">
<thead>
<tr>
<th>Username</th>
<th>Password</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
</tr>
<tr>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
</tr>
<tr>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
</tr>
<tr>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
</tr>
</tbody>
</table>
</div>
Try it here: jsfiddle.net
在这里试试：jsfiddle.net
回答by Ranjan
**everything worked fine.**
<div class="container">
<table id="reviewer_table" class="table table-hover table-striped
table-condensed tasks-table">
<thead>
<tr>
<td>abc </td>
<td> def</td>
<td> ghi </td>
</tr>
</thead>
<tbody>
<td> jkl</td>
<td> mno </td>
<td>pqr</td>
</tbody>
<tbody>
<td> asdf</td>
<td> adfd </td>
<td>dfdf</td>
</tbody>
</table>
</div>
[OUtput][1]
[1]: https://i.stack.imgur.com/IrCMK.jpg
