I am struggling to make my bootstrap table more mobile-friendly. Despite trying various methods, I have not been satisfied with the results. I am interested in how others are successfully adapting their tables to look good on mobile devices while maintaining a traditional layout on computers and tablets.
Here is an example of my table:
<div class="col-lg-12">
<table id="example" class="table table-bordered table-striped table-responsive">
<thead>
<tr>
<th>Pay</th>
<th>Print</th>
<th>Year</th>
<th>Property Id</th>
<th>Name/Location</th>
<th>Status</th>
<th>Amount Paid</th>
<th>Date Paid</th>
<th>Due</th>
<th>Pin</th>
<th>Box</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td><button class="btn btn-warning btn-xs">Print Bill</button><br><button class="btn btn-warning btn-xs">Print Receipt</button></td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
Despite my attempts using classes like "table-responsive," as well as implementing datatables with the responsive function...
$(document).ready(function() {
$('#example').DataTable( {
responsive: true,
} );
} );
None of these methods have provided a satisfactory solution, as they do not add a scroll bar for easier user navigation. I am interested in examples of how others are addressing this issue, such as collapsing rows for mobile phones, or other creative solutions. Any guidance on this matter would be greatly appreciated!