Twitter Bootstrap - 带有行跨度的表条带化答案

【问题标题】：Twitter Bootstrap - Table Striping with rowspanTwitter Bootstrap - 带有行跨度的表条带化
【发布时间】：2015-01-17 07:08:20
【问题描述】：

我正在尝试整理一个使用 twitter 引导条带化的表，但我需要它不适用于“嵌套”行。我的意思是我有这样的表格（标有 S 的条纹单元格）：

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

因为这里的第二行有rowspan="2"的单元格，所以单行单元格得到了条带化效果。更复杂的是，像第二行一样布局的行是有条件的，所以我不能简单地将条带应用于每第三行。有没有办法让条带化来解释行跨度？

【问题讨论】：

提供您的代码以便更好地理解问题。
你必须使用rowspan吗？你可以只拆分那些单独的单元格（例如几个 div）吗？

标签： css twitter-bootstrap html-table

【解决方案1】：

添加一些空表行以避免引导表出现奇怪的条带化。

 <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 行会按预期的那样条纹。

【讨论】：