gpt4 book ai didi

css - Twitter Bootstrap - 带行跨度的表 strip 化

转载 作者:行者123 更新时间:2023-11-28 11:36:32 28 4
gpt4 key购买 nike

我正在尝试整理一个使用 twitter bootstrap strip 化的表,但我需要它不应用于“嵌套”行。我的意思是我有这样的表格(用 S 标记的条纹单元格):

------------------------------------------------------------------------
| S | S | S | S | S |
------------------------------------------------------------------------
| | | | | |
| | ------------------------------ |
| | | S | S | |
------------------------------------------------------------------------
| | | | | |
------------------------------------------------------------------------

因为这里的第二行有 rowspan="2"的单元格,单行单元格获得条纹效果。更复杂的是,像第二行这样布局的行是有条件的,所以我不能简单地应用于每第三行的 strip 化。有没有办法让 strip 化考虑行跨度?

最佳答案

添加一些空表行以避免 Bootstrap 表出现奇怪的 strip 化。

 <table class="table table-striped table-bordered">
<tr>
<th colspan="2" rowspan="3">header 1</th>
<th>header 2</th>
</tr>
<tr>
</tr>
<tr>
<th>sub header 1</th>
</tr>
<tr>
<td>row 1 cell 1</>
<td>row 1 cell 2</>
<td>row 1 cell 3</>
</tr>
<tr>
<td>row 2 cell 1</>
<td>row 2 cell 2</>
<td>row 2 cell 3</>
</tr>
</table>

如果没有空的 tr 行,上面的第 1 行就不会像条纹一样开始,tr 行第 1 行会按预期条纹。

关于css - Twitter Bootstrap - 带行跨度的表 strip 化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27022371/

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