I am having problems getting my class selector .table-heading-column working in my CSS.
I have ran this through the validator, and neither my HTML or CSS have errors. I have exhausted all fixes I can come up with. I am new to HTML so without any errors I cannot really find where the problem is. From my class book, I have followed pretty much copied the example and changed them to my own preference. Any ideas would be helpful, thanks.
Here is my full code:
.container {
max-width: 60%;
border: 4px solid black;
margin: auto;
padding: 1em;
background-color: maroon;
}
article, body, div, nav, footer, header, h1, h2, h3, p, table, tbody, td, tfoot, th, thead, tr, ul {
border: 0;
padding: 0;
margin: 0;
top: 0;
}
header,
footer {
padding: 1em;
color: black;
text-align: center;
clear: both;
background-color: white;
}
h3 {
color: white;
padding: 1em;
margin: .5em;
}
nav {
padding: 0;
margin: .5em;
overflow: hidden;
float: top;
}
article {
width: 70%;
float: right;
padding: 1em 0;
color: white;
}
article p {
padding: 0 1em 1em;
}
aside {
padding: 1em 0;
margin: 0;
width: 30%;
color: white;
}
ul {
list-style-type: none;
background-color: black;
overflow: hidden;
padding: 0;
margin: 0;
}
li {
float: left;
}
li a {
display: block;
padding: 10px 12px;
color: white;
text-align: center;
text-decoration: none;
}
li a:hover {
background-color: green;
}
arrow {
padding: 4px 8px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
border: 2px solid black;
font-size: 1.3em;
background-color: white;
padding: .25em;
text-align: center;
}
table {
width: 100%;
border: 2px solid black;
}
th {
background-color: #17C0CA;
}
.table-heading-column {
//The colors do not change here //
background-color: black;
}
.table-data-columns {
//The colors do not change here //
background-color: white;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Resume</h1>
</header>
<nav>
<ul>
<li><a href="file:///C:/Users/cbdue/Desktop/index.html">« Previous</a>
<li><a href="file:///C:/Users/cbdue/Desktop/index.html">Index</a></li>
<li><a href="file:///C:/Users/cbdue/Desktop/resume.html">Resume</a></li>
<li><a href="https://lichess.org/">Chess</a></li>
</ul>
</nav>
<h3> Work Experience </h3>
<table>
<colgroup> // **Here is my class label** //
<col class="table-heading-column">
<col class="table-data-columns" span="3">
</colgroup>
<thead>
<tr>
<th rowspan="2">Company</th>
<th colspan="2">Dates</th>
<th rowspan="2">Title</th>
</tr>
<tr>
<th>Start</th>
<th>End</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Bistro Restuarant</td>
<td>June 2004</td>
<td>Dec 2015</td>
<td>Manager</td>
</tr>
<tr>
<td>Nagoya International School</td>
<td>January 2015</td>
<td>June 2016</td>
<td>Learning Support Teacher</td>
</tr>
<tr>
<td>International School of Latvia</td>
<td>July 2016</td>
<td>June 2018</td>
<td>Learning Support Teacher</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>This rule overrides your col / colgroup styles:
td, th {
border: 2px solid black;
font-size: 1.3em;
background-color: white; /* <<< this will take precedence */
padding: .25em;
text-align: center;
}
td (table "cells") are lower in the HTML structure, which means the above rule is more specific and it will override your col/colgroup styles.
.container {
max-width: 60%;
border: 4px solid black;
margin: auto;
padding: 1em;
background-color: maroon;
}
article, body, div, nav, footer, header, h1, h2, h3, p, table, tbody, td, tfoot, th, thead, tr,
ul {
border: 0;
padding: 0;
margin: 0;
top: 0;
}
header,
footer {
padding: 1em;
color: black;
text-align: center;
clear: both;
background-color: white;
}
h3 {
color: white;
padding: 1em;
margin: .5em;
}
nav {
padding: 0;
margin: .5em;
overflow: hidden;
float: top;
}
article {
width: 70%;
float: right;
padding: 1em 0;
color: white;
}
article p {
padding: 0 1em 1em;
}
aside {
padding: 1em 0;
margin: 0;
width: 30%;
color: white;
}
ul {
list-style-type: none;
background-color: black;
overflow: hidden;
padding: 0;
margin: 0;
}
li {
float: left;
}
li a {
display: block;
padding: 10px 12px;
color: white;
text-align: center;
text-decoration: none;
}
li a:hover {
background-color: green;
}
arrow {
padding: 4px 8px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
border: 2px solid black;
font-size: 1.3em;
/*background-color: white;*/
padding: .25em;
text-align: center;
}
table {
width: 100%;
border: 2px solid black;
}
th {
background-color: #17C0CA;
}
.table-heading-column {
background-color: #f90;
}
.table-data-columns {
background-color: #0f9;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Resume</h1>
</header>
<nav>
<ul>
<li><a href="file:///C:/Users/cbdue/Desktop/index.html">« Previous</a>
<li><a href="file:///C:/Users/cbdue/Desktop/index.html">Index</a></li>
<li><a href="file:///C:/Users/cbdue/Desktop/resume.html">Resume</a></li>
<li><a href="https://lichess.org/">Chess</a></li>
</ul>
</nav>
<h3> Work Experience </h3>
<table>
<col class="table-heading-column">
<colgroup>
<col class="table-data-columns" span="3">
</colgroup>
<thead>
<tr>
<th rowspan="2">Company</th>
<th colspan="2">Dates</th>
<th rowspan="2">Title</th>
</tr>
<tr>
<th>Start</th>
<th>End</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Bistro Restuarant</td>
<td>June 2004</td>
<td>Dec 2015</td>
<td>Manager</td>
</tr>
<tr>
<td>Nagoya International School</td>
<td>January 2015</td>
<td>June 2016</td>
<td>Learning Support Teacher</td>
</tr>
<tr>
<td>International School of Latvia</td>
<td>July 2016</td>
<td>June 2018</td>
<td>Learning Support Teacher</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>