Question

我正在使用Twitter Bootstrap开发一个Web应用程序。在我们的一个视图中，有一个使用.table-hover类的表。但是，当其余行突出显示时，表中有一些特定的单元格我不想突出显示。我应该使用什么样式规则来实现这种效果？

这大致是我的视图表的组织方式：

<table class="table table-hover">
    <thead>
        <tr>
            <th />
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">Row Group "Heading" 1</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td rowspan="2">Row Group "Heading" 2</td>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
        <tr>
            <td>Content</td>
            <td>Content</td>
            <td>Content</td>
        </tr>
    </tbody>
</table>

我想让跨越2行的单元格在悬停时不会突出显示。

编辑：

我试过这个CSS：

td.rowTitle:hover { background-color: transparent; }

不幸的是，它不起作用。我想这可能是因为整个行都被突出显示，而不仅仅是单元格......

Answer 1

这就是bootstrap CSS的样子：

.table-hover { 
             tbody { tr:hover td, tr:hover th 
                             { background-color: @tableBackgroundHover; } 
                        }
           }

有点JQuery：

  $('td[rowspan]').addClass('hasRowSpan');

然后，您可以使用以下CSS覆盖它：

tbody tr:hover td.hasRowSpan { 
          background-color: none;   /* or whatever color you want */
}

Answer 2

我不确定使用什么方法来创建那些“悬停”，但是如果你分开这些单元格，你可以为悬停添加特定的规则。所以给这些单元格一个类名，然后你可以为它们设置你的特定样式/悬停。

Answer 3

我会将一个类添加到您不希望悬停的元素上，例如：

<tr>
  <td rowspan="2" class="no-hover">Row Group "Heading" 2</td>
  <td>Content</td>
  <td>Content</td>
  <td>Content</td>
</tr>

在您的CSS / SCSS中：

.table-hover {
  .no-hover {
    background-color: transparent !important;
  }
}

在Bootstrap 4中工作。

删除Twitter Bootstrap表中单个单元格的表格悬停效果

3 个答案: