Table Styling (Column colors for odd and even, tr:hover override)

https://stackoverflow.com/questions/21738313

10-10-2022
|

Question

I have a table and I want the columns to have an alternating background color. However, I want it so that when I hover over the row the background color for every cell in that entire row will change to another color. I thought this would be simple, using the nth-child property and the hover pseudo class, but I can't figure this out any help would be appreciated.

Below is my html and CSS. Forgive me for adding my entire code, but I can't seem to pinpoint the exact places that are relevant. I'm still a beginner. I would add an image, but I've already somehow messed so much up that it wouldn't be helpful.

This website has the type of tables that I'm trying to make. http://metrarail.com/metra/en/home/maps_schedules/metra_system_map/md-n/schedule.full.html

This is my html

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Metra Train Schedule</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />

    <!-- Attempt at adding favicon-->
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">

    </head>

<body>

<div id="header"><img src="img/Header.jpg" /></div>

<div id="content">


<hgroup>
    <h1 class="paddedleft">Metra Rails</h1>
    <h2 class="paddedleft">District / North Line in Chicago</h2>
</hgroup>



<h3 class="paddedleft"><a href="#inbound">Inbound Schedule</a> |
<a href="#outbound">Outbound Schedule</a></h3>


<p class="paddedleft">
Metra can get you where you need to be, when you need to be there! When riding with metra you are guarenteed that our schedule will be right on time. You will never have to be late again. Just imagine traveling through the beautiful city of chicago lounging on our fine leather benches in pure comfort. Our trains are the cleanest in the world and have been rated five stars for comfortability, ease of access, and timeliness. You will find that riding with Metra Rails has many benefits to it, you can find more of those benefits <a href="http://metrarail.com/content/metra/en/home/utility_landing/riding_metra/riding_metra.html">here.</a>
</p>

<hr>

<div id="inbounds">
<h3>Milwaukee District / North Line (Mayfair to Chicago)</h3><br>
    <table id="inbound" cellpadding="0" cellspacing="0">
    <caption>Inbound Schedule: Sunday</caption>
    <tbody>

    <tr>
    <th class="stop">Train #</th>
    <th>2600</th>
    <th>2602</th>
    <th>2604</th>
    <th>2606</th>
    <th>2608</th>
    <th>2612</th>
    <th>2614</th>
    <th>2616</th>
    <th>2620</th>
    <th>2622</th>
    </tr>

    <tr>
    <th class="stop">AM/PM</th>
    <td>AM</td>
    <td>AM</td>
    <td>AM</td>
    <td>AM</td>
    <td>AM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    </tr>

    <tr>
    <th class="stop">Mayfair</th>
    <td>06:47</td>
    <td>07:57</td>
    <td>09:57</td>
    <td>&ndash;</td>
    <td>11:57</td>
    <td>01:57</td>
    <td>03:57</td>
    <td>05:57</td>
    <td>09:34</td>
    <td>11:34</td>
    </tr>

    <tr>
    <th class="stop">Grayland</th>
    <td>06:49</td>
    <td>07:59</td>
    <td>09:59</td>
    <td>10:50 c</td>
    <td>11:59</td>
    <td>01:59</td>
    <td>03:59</td>
    <td>05:59</td>
    <td>09:36</td>
    <td>11:36</td>
    </tr>

    <tr>
    <th class="stop">Healy</th>
    <td>06:52</td>
    <td>08:02</td>
    <td>10:02</td>
    <td>&ndash;</td>
    <td>12:02</td>
    <td>02:02</td>
    <td>04:02</td>
    <td>06:02</td>
    <td>09:39</td>
    <td>11:39</td>
    </tr>

    <tr>
    <th class="stop">Western Avenue</th>
    <td>06:57</td>
    <td>08:08</td>
    <td>10:08</td>
    <td>&ndash;</td>
    <td>12:08</td>
    <td>02:08</td>
    <td>04:08</td>
    <td>06:08</td>
    <td>09:43</td>
    <td>11:43</td>
    </tr>

    <tr>
    <th class="stop">Union Station</th>
    <td>07:12</td>
    <td>08:22</td>
    <td>10:22</td>
    <td>11:10</td>
    <td>12:22</td>
    <td>02:22</td>
    <td>04:22</td>
    <td>06:22</td>
    <td>09:58</td>
    <td>11:58</td>
    </tr>

    </tbody>
</table>
    </div>

<hr>

<div id="outbounds">
<h3>Milwaukee District / North Line (Chicago to Mayfair)</h3><br>
    <table id="outbound" cellpadding="0" cellspacing="0">
    <caption>Outbound Schedule: Sunday</caption>
    <tbody>

    <tr>
    <th class="stop">Train #</th>
    <th>2601</th>
    <th>2605</th>
    <th>2607</th>
    <th>2611</th>
    <th>2615</th>
    <th>2619</th>
    <th>2621</th>
    <th>2623</th>
    <th>2625</th>
    <th>2627</th>
    </tr>

    <tr>
    <th class="stop">AM/PM</th>
    <td>AM</td>
    <td>AM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    <td>PM</td>
    <td>AM</td>
    </tr>

    <tr>
    <th class="stop">Union Station</th>
    <td>08:35</td>
    <td>10:35</td>
    <td>12:35</td>
    <td>02:35</td>
    <td>04:35</td>
    <td>05:35</td>
    <td>06:35</td>
    <td>08:35</td>
    <td>10:35</td>
    <td>12:25</td>
    </tr>

    <tr>
    <th class="stop">Western Avenue</th>
    <td>08:44</td>
    <td>10:44</td>
    <td>12:44</td>
    <td>02:44 c</td>
    <td>04:44</td>
    <td>&ndash;</td>
    <td>06:44</td>
    <td>08:44</td>
    <td>10:44</td>
    <td>12:34</td>
    </tr>

    <tr>
    <th class="stop">Healy</th>
    <td>08:49</td>
    <td>10:49</td>
    <td>12:49</td>
    <td>02:49 c</td>
    <td>04:49</td>
    <td>&ndash;</td>
    <td>06:49</td>
    <td>08:49</td>
    <td>10:49</td>
    <td>12:39</td>
    </tr>

    <tr>
    <th class="stop">Grayland</th>
    <td>08:52</td>
    <td>10:52</td>
    <td>12:52</td>
    <td>02:52</td>
    <td>04:52</td>
    <td>05:48 c</td>
    <td>06:52</td>
    <td>08:52</td>
    <td>10:52</td>
    <td>12:42</td>
    </tr>

    <tr>
    <th class="stop">Mayfair</th>
    <td>08:54</td>
    <td>10:54</td>
    <td>12:54</td>
    <td>02:54 c</td>
    <td>04:54</td>
    <td>&ndash;</td>
    <td>06:54</td>
    <td>08:54</td>
    <td>10:54</td>
    <td>12:44</td>
    </tr>

    </tbody>
</table>
    </div>


<div class="other">
  <h2>To see schedules for other days click <a href="http://metrarail.com/metra/en/home/maps_schedules/metra_system_map/md-n/schedule.full.html">here.</a></h2></div>
</div>

</body>
</html>

This is my css

@charset "utf-8";
/* CSS Document */

body {
    background:url(img/background_texture.jpg) no-repeat center center fixed; 
  background-size: cover;
  color: white;
}

h1, h2, h3 {
    font-family:Helvetica, Arial, Tahoma, Geneva, sans-serif
}

h1 {
    margin: 0px;
}

#header {
    width: 1020px;
    padding: 0px;
    margin: 0 auto;
}

#header img {
    vertical-align: bottom;
}

#content {
    background-image:url(img/ContentBox.png);
    background-repeat: no-repeat;
    background-position:center;
    padding: 0;
    width: 1020px;
    margin: 0 auto;
}

table, td, th {
    border: 1px solid white;
    border-collapse: collapse;
    padding: 4px;
    text-align: center;
    font-family:Arial, Helvetica, sans-serif;
}

th {
    font-size: 1.25em;
    font-weight: bolder;
}

td {
    font-weight: bold;
}

caption {
    font-size: 1.5em;
    font-weight: bold;
}


.stop {
    text-align: right;
}

a:link {
    color: #d39a11;
}

a:visited {
    color:#7E6201;
}

a:hover {
    color:#FB992D
}

a:active {
    color: d39a11;
}

#inbounds, #outbounds {
    text-align: center;
    width: 100%;
}

#inbound, #outbound {
    margin: auto;
}

.other {
    text-align: center;
}

#inbounds h3, #outbounds h3 {
    font-size: 1.5em;
    margin: 0;
}

p {
    font-size: 1.15em;
    padding-right: 5px;
}

.paddedleft {
    padding-left: 5px;
}

hr { display: block;
    height: 2px;
    border: 0;
    border-top: 1px solid #0054a4;
    margin: 1em 0;
    padding: 0; 
}

td:nth-child(odd) {
    background-color: #363c40;
}

td:nth-child(even) {
    background-color:#d39a11;
}


tr:hover > td:nth-child(odd), td:nth-child(even) {
    background-color:#1A1C1E;
}

Solution

The problem is your last line. It says,

on tr hover of odd td's do this background-color.
Furthermore, do the same on even td's -> there's no hover involved in this rule and it comes after your earlier even rule and thus overrides it

The comma separates the two rules and you would need to add tr:hover > to td:nth-child(even)

But since we are talking about both odd AND even td's, it doesn't make sense to separate them so

tr:hover td {
    background-color:#1A1C1E;
}

should work just fine

Here's a jsfiddle of your problem (I changed the hover background-color to green for clarity)

OTHER TIPS

Your css code:

tr:hover > td:nth-child(odd), td:nth-child(even)

When you put a comma in a css declaration, it's adding a new declaration in the same line. This css code says that tr:hover > td:nth-child(odd) should have the background color, as well as EVERY td:nth-child(even).

Change the code to this:

tr:hover > td:nth-child(odd), tr:hover > td:nth-child(even)

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow