html-table - Bootstrap 4:在隐藏多个单元格时避免破坏表格
问题描述
我有一张这样的桌子:
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" class="d-none d-sm-block">First</th>
<th scope="col" class="d-none d-sm-block">Last</th>
<th scope="col" class="d-none d-sm-block">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
并且当使用d-none d-sm-block
(在小屏幕上隐藏元素)时,我的整个桌子刚刚破裂,而我试图隐藏的三个单元格只是相互堆叠。
我做错了什么,还是这是 BS4 中的错误?
这是一支笔来查看它:
解决方案
您遇到问题的原因是因为您将显示设置为块而不是表格单元。
class="d-none d-sm-block"
到
class="d-none d-sm-table-cell"
它会正确显示。这将显示所有小或大的东西。如果您希望将其隐藏为小而显示为大于此的所有内容,那么它需要改为
class="d-none d-md-table-cell"
推荐阅读
- google-chrome - 有没有办法在浏览器中执行事件跟踪?
- c - C程序在数组json中使用对象时不起作用
- php - Apache 配置和会话变量 SERVER_NAME
- javascript - 一次消耗 3 个元素的 AsyncGenerator?
- php - Google Sheet API 的问题
- java - spring boot 2.1.6 with zipkin,使用spring boot应用调试项目抛出异常
- php - Laravel AJAX 500 内部错误,没有消息
- woocommerce - 如何找到 Woocommerce“订单支付”页面的路径
- javascript - 如何从 Antd 中的所有页面中检查所有行
- boost - 使用 Sitecore 在 Solr 上提升页面