How to customize CSS (tr: hover) in a table with thead?

Question

How to customize CSS (tr: hover) in a table with thead?

Navigation

#1 by (0 votes)

-1

I am creating a project to exercise some things, and I made a table with fictitious data, where, when mouseover, the corresponding line changes color. Except I did not want this to happen to the title line. What can I do? I tried everything but it did not work out.

HTML:

<table id="esttt">
<thead>
<tr><td colspan="2">DADOS</td></tr>
<tr>
<td>ABC</td>
<td>22.7%</td>
</tr>
<tr>
<td>DEF</td>
<td>42.5%</td>
</tr>
<tr>
<td>GHI</td>
<td>12%</td>
</tr>
<tr>
<td>JKL</td>
<td>54.6%</td>
</tr>
</thead>
</table>

And CSS:

#esttt{
    width:300px;
}

#esttt tr{
    line-height:30px;
}

#esttt tr:hover{
    background:#6B6BB6;
    color:#FFF;
}

#esttt thread{
    color:#FFF;
    font-weight:bold;
}

#esttt thread:hover{
    color:#FFF;
    font-weight:bold;
}

html5 css3

asked by anonymous 09.11.2018 / 03:14

1 answer

Search for elements with a certain distance of time (only reporting the time) Function with loop repetition in python

score 0 · Accepted Answer

Roberto first see that you typed the element name in CSS incorrectly ... where thread should be thead

First of all, I found the structure of your table a bit strange ... here you can hide the Mozilla documentation link

Expected would be something like separating thead and tbody :

<table>
  <thead>
    <tr>
      <th>Header content 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
    </tr>
  </tbody>
</table>

Now about the problem and for :hover catch on all tr less on the first you can use the :not() selector for example and "remove" from the css rule only the first th (:first-child) so it will look like this: #esttt tr:not(:first-child):hover

See how the result with this template was made using :not() :

#esttt {
    width: 300px;
}

#esttt tr {
    line-height: 30px;
}

#esttt tr:not(:first-child):hover {
    background: #6B6BB6;
    color: #000;
}

#esttt thead {
    color: #000;
    font-weight: bold;
}

#esttt thead:hover {
    color: #000;
    font-weight: bold;
}

<table id="esttt">
    <thead>
        <tr>
            <td colspan="2">DADOS</td>
        </tr>
        <tr>
            <td>ABC</td>
            <td>22.7%</td>
        </tr>
        <tr>
            <td>DEF</td>
            <td>42.5%</td>
        </tr>
        <tr>
            <td>GHI</td>
            <td>12%</td>
        </tr>
        <tr>
            <td>JKL</td>
            <td>54.6%</td>
        </tr>
    </thead>
</table>