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( { } ); } );
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
Post a Comment