twitter-bootstrap Bootstrap 模式溢出我的表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23509122/
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 modal overflowing my table row
提问by skalidindi
See http://jsfiddle.net/9sjRh/
I have table in a modal but it is overflowing. I have playing css tricks with it such as changing the width of the modal or changing the margins. None of these seems to have worked. Any help would be appreciated.
我有一个模态表，但它溢出了。我用它玩 css 技巧，例如更改模式的宽度或更改边距。这些似乎都没有奏效。任何帮助，将不胜感激。
HTML
HTML
<div id="classModal" class="modal fade bs-example-modal-lg" tabindex="-1"
role="dialog" aria-labelledby="classInfo" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="classModalLabel">
Class Info
</h4>
</div>
<div class="modal-body">
<table id="classTable" class="table table-bordered">
<thead>
</thead>
<tbody>
<tr>
<td>CLN</td>
<td>Last Updated Date</td>
<td>Class Name</td>
<td># Tests</td>
<td>Test Coverage (Instruction)</td>
<td>Test Coverage (Complexity)</td>
<td>Complex Covered</td>
<td>Complex Total</td>
<td>Category</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
JS
JS
$('#classModal').modal('show')
采纳答案by Najib
you need to override the style 8px to 5px or less
您需要将样式 8px 覆盖为 5px 或更小
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
padding: 5px !important; // currently 8px
}
the syle is currently in bootstrap.min.css you may add the following style in your own css class.
样式目前在 bootstrap.min.css 中，您可以在自己的 css 类中添加以下样式。
回答by b0y
回答by user1707141
I know its too late but this is what worked for me
我知道为时已晚，但这对我有用
Wrapped the table inside a div and added overflow:auto as a style
将表格包裹在 div 中并添加溢出：自动作为样式
<div style="overflow: auto">
<table class="table table-hover">
<thead>
<tr >
<th id="th1">Header 1</th>
<th id="th2">Header 2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
回答by AyB
Table tries it's best to fit the contents within the container, but if your text is too long it will be forced to override the container's width and spread. You can force it to still re-size within the container using table-layout:fixedbut it will cause undesirable formatting like this.
Table 尽量将内容放入容器中，但如果您的文本太长，它将被迫覆盖容器的宽度和展开。您可以强制使用table-layout:fixed它在容器内重新调整大小，但这会导致像这样的不良格式。
If you have lengthy headers, I recommend you to follow the vertical header approach which looks like:
如果您有冗长的标题，我建议您遵循垂直标题方法，如下所示：
<tbody>
<tr>
<th>Heading 1</th>
<td>Value 1</td>
</tr>
<tr>
<th>Heading 2</th>
<td>Value 2</td>
</tr>
</tbody>
Have a look at the formatting I made hereon your code.
看一看格式化我做在这里您的代码。
回答by Nils Renaud
The answer of user1707141 works. But Bootstrap has its specific class for your table : table-responsive
user1707141 的回答有效。但是 Bootstrap 为您的表提供了特定的类：table-responsive
Documentation about this element here : https://getbootstrap.com/docs/4.0/content/tables/#always-responsive
关于这里元素的文档：https: //getbootstrap.com/docs/4.0/content/tables/#always-responsive
回答by Luis Cabrera Benito
First thing: you must wrap your table in a divwith the class table-responsive.
第一件事：你必须div用 class将你的桌子包裹在 a 中table-responsive。
My problem was (in Bootstrap 3) that the div.table-responsivewas inside a div.container, I put the div.table-responsiveoutside the div.containerand it worked like a charm
我的问题是（在 Bootstrap 3 中）它div.table-responsive在 a 里面div.container，我把它放在div.table-responsive外面div.container，它就像一个魅力
