gpt4 book ai didi

html-table - Bootstrap 4 : avoid breaking table when hiding more than one cell

转载 作者:行者123 更新时间:2023-12-04 01:31:25 25 4
gpt4 key购买 nike

我有一张这样的 table :

<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 时(在小屏幕上隐藏元素),我的整个 table 都坏了,我试图隐藏的三个单元格只是相互叠加。

我做错了什么,还是这是 BS4 中的错误?

这是一支笔来查看它:

https://codepen.io/anon/pen/RBxjYo

最佳答案

您遇到问题的原因是因为您将显示设置为阻止而不是表格单元格。

class="d-none d-sm-block"


class="d-none d-sm-table-cell"

它会正确显示。这将显示所有小或大的东西。如果您希望将其隐藏在较小的范围内并在所有大于该范围的内容中显示出来,那么它需要是这样的
class="d-none d-md-table-cell"

关于html-table - Bootstrap 4 : avoid breaking table when hiding more than one cell,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51597005/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com