Hasan A Yousef Hasan A Yousef - 1 year ago 74
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

hover, when i hover over the
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
effect that is assigned to the row only?

<!DOCTYPE html>
<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;

<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
<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>
<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>
<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>
<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>
<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>
<td colspan="3">Total</td>
<td >4</td>


Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download