更新时间:2023-09-18 20:05:28
用您的表格替换您的表格
< div class ='table-responsive'> - > < div style =overflow-x:auto;>
I'm using bootstrap 3 for a website project. I'm trying to create a page with a responsive table, so that I'd have the scrollbar when the table is too big. I made a test case like so:
<div class="row">
<h4>Nuværende kurser</h4>
<div class="col-12 col-sm-12 col-lg-12">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</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>
<td>2</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>
<td>3</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>
</div><!-- end col-12 -->
</div><!-- end row -->
Now, the problem is that it doesn't add the scrollbar, it merely expands the website to the width of the table.
See a screenshot here:
I've seen it working on several other websites, so something I'm doing...is wrong.
Replace your table-responsive with this
<div class='table-responsive'> -> <div style="overflow-x:auto;">