问题描述
我试图在我的项目中制作自定义引导表
但是当我在移动显示中尝试我的代码时。
但是，“表格”始终将其宽度除以其内容中数据的 100%。
我想要的是在显示很小的时候创建一个 'table overflow-x'
<div class="my-table table-responsive">
<table class="table my-dark-tb" style="overflow: hidden;">
<thead class="my-thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First Data</th>
<th scope="col">Second Data</th>
<th scope="col">Address</th>
<th scope="col">Phone</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td> Lorem ipsum dolor sit amet consectetur. </td>
<td>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis consectetur autem quis.</td>
<td>London</td>
<td>981638027901</td>
<td class="my-table-action">
<a href="#view" class="action-button view">
<span>Detail</span>
</a>
<a href="#edit" class="action-button edit">
<span>Edit</span>
</a>
<a href="#delete" class="action-button delete" data-toggle="modal" data-target="#delete">
<span>Delete</span>
</a>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>The quick,brown fox jumps over a lazy dog</td>
<td>The quick,brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog</td>
<td>Tokyo</td>
<td>62926281012</td>
<td class="my-table-action">
<a href="#view" class="action-button view">
<span>Detail</span>
</a>
<a href="#edit" class="action-button edit">
<span>Edit</span>
</a>
<a href="#delete" class="action-button delete" data-toggle="modal" data-target="#delete">
<span>Delete</span>
</a>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Far far away,behind the word mountains</td>
<td>far from the countries Vokalia and Consonantia,</td>
<td>Berlin</td>
<td>1214123145112</td>
<td class="my-table-action">
<a href="#view" class="action-button view">
<span>Detail</span>
</a>
<a href="#edit" class="action-button edit">
<span>Edit</span>
</a>
<a href="#delete" class="action-button delete" data-toggle="modal" data-target="#delete">
<span>Delete</span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
结果是合适的，但只有 576px 宽
当宽度
如果'表'中有很多数据就会成为问题