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

标签 css twitter-bootstrap html-table

我正在尝试整理一个使用 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/

相关文章:

css - 从面向 CSS、SCSS 错误的 Angular 7 升级到 Angular 8 时遇到错误

php - 错误异常,array_merge() : Argument #2 is not an array when i work a call Ajax

html - 将文本放在 Bootstrap 输入旁边不起作用

html - 用于页面布局的表与 Div

javascript - jQuery/JavaScript 查找表列中的最高值

css - 表现得不合时宜的表单字段(文学)

c# - 根据移动或桌面 HTML 和 CSS 更改图像

html - 悬停时删除CSS中的圆圈

javascript - 通过 href 滚动到元素与 Bootstrap 模式冲突

javascript - jQuery - 如何动态打印空表