这是 Bootstrap 面板上的 css 问题。如果你打开我下面的 jsfiddle 并调整显示以激活 overflow-x,你会看到 Bootstrap 面板标题的蓝色背景颜色变为白色而不是保持蓝色。激活 overflow-x 时需要什么来保留蓝色?
CSS:
.panel-primary {
max-width: 100%;
overflow-x:scroll;
white-space: nowrap;
}
HTML:
<div class="row form-group">
<div class="panel panel-primary">
<div id="hpanel" class="panel-heading">Heading</div>
<div class="panel-body">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
<th>Col8</th>
</tr>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
JS:
$(document).ready(function() {
var table = $('#example').DataTable( {
} );
} );
谢谢
最佳答案
我在玩了几件事后回答了我自己的问题。我在 table 周围创建了一个 div。
<div class="table-responsive">
<table>
.....
</table>
</div>
这使得表格数据响应而不是面板,并解决了颜色问题,并且可能是更好的处理方式。我已经用更新后的代码更新了我原来的 fiddle 。
谢谢
关于css - Bootstrap 面板-primary overflow-x 滚动背景色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43237342/