css - Bootstrap 面板-primary overflow-x 滚动背景色

Question

这是 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( {

    } );
} );

jsfiddle

谢谢

Answer 1

我在玩了几件事后回答了我自己的问题。我在 table 周围创建了一个 div。

<div class="table-responsive">
   <table>
   .....
   </table>
</div>

这使得表格数据响应而不是面板，并解决了颜色问题，并且可能是更好的处理方式。我已经用更新后的代码更新了我原来的 fiddle 。

谢谢