Hasan A Yousef Hasan A Yousef - 6 days ago 5
CSS Question

The table head is responding to the hover assigned to the table row?

I've a simple code for styling my table, as seen in this fiddle, my issue is at hover above the table head, it is taking part of the styling required at the

row
hover, when i hover over the
head
the text became underlined, while I do not need anything to happen.

Is there any mistake in my code, so that the table head is responding the
hover
effect that is assigned to the row only?

<!DOCTYPE html>
<html>
<head>
<title>Table styling</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
table, th, td {
font-family: "Trebuchet MS", Arial, sans-serif;
}
caption {
font-size: 150%;
font-weight: bold;
margin: 5px;
}
table {
width: 750px;
border-collapse: collapse;
margin:50px auto;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
tfoot td{
background: green;
color: white;
font-weight: bold;
}
tr:hover {
color: yellow;
background: orangered;
text-decoration: underline !important;
}
</style>
<body>

<table>
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
<th>Twitter</th>
</thead>
<tbody>
<tr>
<td data-column="First Name">James</td>
<td data-column="Last Name">Matman</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@james</td>
</tr>
<tr>
<td data-column="First Name">Andor</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Designer</td>
<td data-column="Twitter">@andornagy</td>
</tr>
<tr>
<td data-column="First Name">Tamas</td>
<td data-column="Last Name">Biro</td>
<td data-column="Job Title">Game Tester</td>
<td data-column="Twitter">@tamas</td>
</tr>
<tr>
<td data-column="First Name">Zoli</td>
<td data-column="Last Name">Mastah</td>
<td data-column="Job Title">Developer</td>
<td data-column="Twitter">@zoli</td>
</tr>
<tr>
<td data-column="First Name">Szabi</td>
<td data-column="Last Name">Nagy</td>
<td data-column="Job Title">Chief Sandwich Eater</td>
<td data-column="Twitter">@szabi</td>
</tr>
</tbody>
<tfoot>
<td colspan="3">Total</td>
<td >4</td>
</tfoot>
</table>


</body>
</html>

Answer

Your CSS tells every row to have an underline on hover. If you only want that effect on the rows in the body, change the CSS to:

tbody tr:hover {
                text-decoration: underline !important;
            }
Comments