Twitter Bootstrap - 带有rowspan的表条带化

时间:2014-11-19 16:49:31

标签: css twitter-bootstrap html-table

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

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

因为此处的第二行具有rowspan =" 2"的单元格,所以单行单元格获得条带化效果。为了使这一点复杂化,像第二行一样排列的行是有条件的,所以我不能简单地应用于每第3行的条带化。有没有办法让条带化来计算行数?

1 个答案:

答案 0 :(得分: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行会按预期那样条带化。