My issue arises when fetching data using a while loop from the database and having a lot of entries in my data table, resulting in an unwanted scrollbar showing up.
You can view a screenshot here.
I have attempted the following to remove the scrollbar:
#mytable::-webkit-scrollbar {
display: none;
}
and :
.table .table-bordered .table-striped {
overflow-x: hidden;
overflow-y: hidden;
}
The template I am using is Bootstrap 3.
Here is a snippet of my code:
<table id="rip"class="table table-bordered table-striped js-dataTable-full-pagination">
<thead>
<tr>
<th><input id="selectAllboxes" type="checkbox">
<th>cc num</th>
<th>cc</th>
<th>student name</th>
<th>com date</th>
<th>stats</th>
<th>Edit</th>
<th>Print</th>
</tr>
</thead>
<tbody>
echo "<tr>";
?>
<th><input class='checkboxes' type='checkbox' name='checkBoxArray[]' value='<?php echo $cert_id; ?>'></th>
<?php
echo "<td>{$cert_id}</td>";
echo "<td>{$course_title}</td>";
echo "<td>{$name_student}</td>";
echo "<td>{$date_com}</td>";
echo "<td>$status</td>";
echo"<td>
<a href='' target='_blank'><i class='fa fa-print fa-2x'></i></a></a>
</td>
";
echo "<td><a href=''><i class='fa fa-edit fa-2x'></i></a></td>";
echo "</tr>";
}
?>
</tbody>
</table>
Despite trying different solutions, I still haven't been able to remove the scrollbar. Any suggestions on how to tackle this issue?