css - Bootstrap panel-primary overflow-x scrolling background color -


this css question on bootstrap panel. if open jsfiddle below , adjust display overflow-x activated, you'll see blue background color of bootstrap panel-heading transitions white rather keeping blue. needed retain blue when overflow-x activated?

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

thanks

i answered own question after playing around several things. created div around table.

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

this makes table data responsive rather panel , resolves color issue , better way go things anyway. have updated original fiddle updated code.

thanks


Comments