我有 2 个具有相同 HTML 的表格,并且都声明为:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="card">
<div class="card-body">
<table class="table table-sm table-hover table-responsive">
<thead>
<tr>
<th>Item 01</th>
<th>Item 02</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 01</td>
<td>Item 02</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
这是我在屏幕上看到的:
用相同 HTML 声明的第二个和连续的表在 thead
和 tbody
上没有获得 100% 的宽度...
这里有什么问题?
更新:
由于最后一行的内容,我的第一个表格可以正常工作,它足够长以使其 100% 适合我的卡片 div。
实际上 it's a issue on Bootstrap 4 , 所以这个问题的-2 信誉是无效的。谢谢。
最佳答案
发现是Bootstrap V4的问题,可以看这个issue ,我的第一个表格不工作,它只是最后一行的内容足够长以填满表格宽度,所以它看起来像工作。
编辑:通过添加 table-responsive 类作为 table 的父 div 得到修复,here is the ship list for the fix和 the issue that reported the bug .
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-sm table-hover">
<thead>
<tr>
<th>Item 01</th>
<th>Item 02</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 01</td>
<td>Item 02</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
关于html - Bootstrap 4 .table-responsive 类不会占用 100% 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47159748/