I am currently working with Bootstrap HTML 5 where I have a panel containing a table. Although I have set scroll for the panel, the table is not adjusting properly within the panel and the scrollbar appears inactive. My goal is to ensure that each header content in the table cells does not overlap and the scrollbar becomes active when there is excessive content.
Here is the HTML code:
<div class="panel-body panel-scroll">
<table class="table table-bordered" id="tableMyCert">
<thead style="background-color:lightblue">
<tr>
<th class="col-sm-4">head 1</th>
<th class="col-sm-3">head 2</th>
<th class="col-sm-3">head 3</th>
<th class="col-sm-3">head 4</th>
<th class="col-sm-3">head 5</th>
<th class="col-sm-5">head 6</th>
<th class="col-sm-2">head 7</th>
<th class="col-sm-5">head 8</th>
<th class="col-sm-4">head 9</th>
<th class="col-sm-2">head 10</th>
<th class="col-sm-5">head 11</th>
<th class="col-sm-4">head 12</th>
<th class="col-sm-2">head 13</th>
<th class="col-sm-5">head 14</th>
<th class="col-sm-4">head 15</th>
<th class="col-sm-2">head 16</th>
<th class="col-sm-5">head 17</th>
<th class="col-sm-5">head 18</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
And here is the CSS code:
.panel-scroll{
overflow-x:scroll;
width:100%;
}