Joan Perez Lozano Joan Perez Lozano - 1 month ago 5
CSS Question

Hovering just one cell of a table

How can I hover just one cell of a table? I don't want to hover all of the row. Here is my table 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" width="10%">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>




Note: I'm using Bootstrap for the hover.
(I don't mind if the problem can be fixed without using Bootstrap.)

Answer

You need to overwrite bootsrap rules with a selector strong enough : see specifity.

Seems to be tr:hover to reset here first :

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

Then apply the rule you need to your tds, using any attributes used here (class, 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" width="10%">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>

Notice: i updated the table code about rowspan and colspan values (colspan="1" doesn't even nedd to be set, it is defaut value)

Comments