Seeking help with a CSS issue related to a Bootstrap panel. When the overflow-x property is activated, the blue background color of the panel-heading transitions to white instead of staying blue. Any suggestions on how to maintain the blue color while keeping overflow-x active?
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( {
} );
} );
Check out the jsfiddle for reference
Thank you