Bootstrap v4.0.0-alpha.3 table-移动视图中的回流问题
Bootstrap v4.0.0-alpha.3 table-reflow issue in mobile view
我在移动视图中尝试以下代码无法修复移动视图中的 table-reflow 问题。任何建议都会得到真正的应用
查看代码 CODEPEN
<div class="container">
<div class="row">
<div class="col-sm-12">
<table class="table table-reflow">
<thead>
<tr>
<th>Id</th>
<th>Employee Name</th>
<th>Salary</th>
<th>Bonus</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr scope="row">
<td>665</td>
<td>Amit Shah</td>
<td>10000</td>
<td>1000</td>
<td>11000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
这似乎是 BS4 alpha 中的一个已知问题:
https://github.com/twbs/bootstrap/issues/20510
一种解决方法是为 table 设置固定宽度以防止其换行。
我有使用媒体查询的解决方案。希望它可以帮助你。
检查 CODEPLY link
CSS:
@media (max-width: 544px) {
.table-reflow thead,
.table-reflow thead tr,
.table-reflow tbody tr {
width: 100%;
}
}
我在移动视图中尝试以下代码无法修复移动视图中的 table-reflow 问题。任何建议都会得到真正的应用
查看代码 CODEPEN
<div class="container">
<div class="row">
<div class="col-sm-12">
<table class="table table-reflow">
<thead>
<tr>
<th>Id</th>
<th>Employee Name</th>
<th>Salary</th>
<th>Bonus</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr scope="row">
<td>665</td>
<td>Amit Shah</td>
<td>10000</td>
<td>1000</td>
<td>11000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
这似乎是 BS4 alpha 中的一个已知问题: https://github.com/twbs/bootstrap/issues/20510
一种解决方法是为 table 设置固定宽度以防止其换行。
我有使用媒体查询的解决方案。希望它可以帮助你。 检查 CODEPLY link
CSS:
@media (max-width: 544px) {
.table-reflow thead,
.table-reflow thead tr,
.table-reflow tbody tr {
width: 100%;
}
}