CODEWITHSUNDEEP
htmlcss
Magno Alberto
Magno Alberto

Reputation: 668

HTML table how highlight row on hover except first column?

Simple table:

<table id="myTable">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>X</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>X</td>
  </tr>
</table>

What I like:

table css hover

Upvotes: 3

Views: 4790

Answers (4)

ibrahim mahrir
ibrahim mahrir

Reputation: 31692

Use :not and :first-child to exclude the first cell like so:

#myTable tr:hover td:not(:first-child){
    background: #ddd;
}

Demo:

#myTable {
  border-collapse: collapse;
}

#myTable td {
  width: 100px;
  border: 1px solid black;
}

#myTable tr:hover td:not(:first-child) {
  background: #ddd;
}
<table id="myTable">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>X</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>X</td>
  </tr>
</table>

Upvotes: 6

Afnan Ahmad
Afnan Ahmad

Reputation: 2542

You can use the :not with :firstchild like this: 

$("#myTable tr").hover(
    function () { $(this).find("td:not(:first-child)").addClass('hoverclass') }, 
    function () { $(this).find("td:not(:first-child)").removeClass('hoverclass') }
);
#myTable tr:hover td:not(:first-child)
{
  background-color: #444444;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table id="myTable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>2</td><td>X</td></tr>
<tr><td>3</td><td>4</td><td>X</td></tr>
</table>

Upvotes: 1

jackJoe
jackJoe

Reputation: 11148

Use the :first-child Selector and a :not.

For example:

#myTable tr:hover td:not(:first-child) {
    background: #999;
}


#myTable tr:hover td:not(:first-child) {
    background: #999;
}
<table id="myTable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>2</td><td>X</td></tr>
<tr><td>3</td><td>4</td><td>X</td></tr>
</table>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

If I'm understanding the end goal, target :hover on a non :first-child element, then also select all of the elements that come after it using the general sibling selector.

td:not(:first-child):hover, td:not(:first-child):hover ~ td {
  background: #eee;
}
<table id="myTable">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>X</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>X</td>
  </tr>
</table>

Upvotes: 1

Related Questions