只悬停表格的一个单元格

Posted 2023-03-06

【中文标题】只悬停表格的一个单元格

【英文标题】：Hovering just one cell of a table

【发布时间】：2017-03-13 18:02:06

【问题描述】：

如何？我不想悬停所有行。这是我的表格 html：

<table class="table table-hover table-bordered">
    <thead>
        <tr>
            <th class="danger" colspan="4">Comprobante de Pago</th> 
        </tr>
    </thead>
        <tr>
            <td class="warning" >Fecha:</td>
            <td colspan="2" id="vertical_align">sdf</td>
        </tr>
        <tr>
            <td rowspan="3" colspan="1" class="asd">Client</td>
            <td colspan="1">NAME</td>
            <td colspan="1">NAME 2</td> 
        </tr>
        <tr>
            <td colspan="2">asd</td>    
        </tr>
        <tr class="info">
            <td colspan="3">asd</td>
        </tr>   

注意：我使用 Bootstrap 进行悬停。 （我不介意不使用 Bootstrap 是否可以解决问题。）

【问题讨论】：

您是否尝试过向<td class="myclass"> 添加一个类，然后在CSS 中使用.myclass:hover？

【参考方案1】：

试试这个

table td:hover
    background-color: magenta;

然后删除类table-hover这里<table class="table table-hover table-bordered">

【参考方案2】：

将格式应用于 TD 元素。

.table td:hover
    background-color: green;

【参考方案3】：

您需要使用选择器strong enough : see specifity 覆盖引导规则。

好像是tr:hover先在这里重置：

.table.table-hover.table-bordered tr:hover /* selector strong enough to overwrite bootsrap rule */
  background:none;/* remove bg */

然后将您需要的规则应用到您的 tds，使用此处使用的任何属性（类、id、colspan、rowspan、...）

.table.table-hover.table-bordered tr:hover 
  background: none;

td:hover 
  background: lightgray;

/* a few selector examples */
td[colspan]:hover 
  background: lime;

td[colspan] + td[colspan]:hover 
  background:turquoise;

td[colspan="2"]:hover 
  background: gold;

td[rowspan]:hover 
  background: tomato;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover table-bordered">
  <thead>
    <tr>
      <th class="danger" colspan="3">Comprobante de Pago</th>
    </tr>
  </thead>
  <tr>
    <td class="warning" >Fecha:</td>
    <td colspan="2" id="vertical_align">sdf</td>
  </tr>
  <tr>
    <td rowspan="3" class="asd">Client</td>
    <td colspan="1">NAME</td>
    <td colspan="1">NAME 2</td>
  </tr>
  <tr>
    <td colspan="2">asd</td>
  </tr>
  <tr class="info">
    <td colspan="2">asd</td>
  </tr>
</table>

注意：我更新了rowspan 和colspan 值的表格代码（colspan="1" 甚至不需要设置，它是默认值）

【讨论】：

非常感谢，我也想知道如何为单元格“Fecha:”和单元格“Client”设置不同的宽度尺寸，正如你所注意到的，我已经设置了 10% 的宽度对于单元格“Fecha”，但如果我想将 30% 设置为单元格“Client”，则不允许。

哦，所以不可能有 2 个不同宽度的单元格？

@JoanPerezLozano 你需要欺骗它，就像它是建立在更多的列上才能打破它一样。 codepen.io/anon/pen/PGMqWZ 其实.asd和.warning属于同一列，它们的宽度无论如何都是一样的` :(

【参考方案4】：

这应该可以解决问题...

table tr td:hover
  background-color:red;
  

<table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th class="danger" colspan="4">Comprobante de Pago</th> 
            </tr>
        </thead>
            <tr>
                <td class="warning" >Fecha:</td>
                <td colspan="2" id="vertical_align">sdf</td>
            </tr>
            <tr>
                <td rowspan="3" colspan="1" class="asd">Client</td>
                <td colspan="1">NAME</td>
                <td colspan="1">NAME 2</td> 
            </tr>
            <tr>
                <td colspan="2">asd</td>

            </tr>
            <tr class="info">
                <td colspan="3">asd</td>
            </tr>

</table>

【参考方案5】：

你可以使用重要的。

.table td:hover
    background-color: red !important;

【讨论】：

这不适用于所有表格单元格吗？ OP 询问如何悬停“只有一个”

我认为你可以使用一个类或一个id：

.table .asd:hover background-color: red !important;