【发布时间】：2018-02-03 14:45:45
【问题描述】：
我的类选择器 .table-heading-column 在我的 CSS 中工作时遇到问题。
我已经通过验证器运行了这个，我的 HTML 或 CSS 都没有错误。我已经用尽了我能想出的所有修复方法。我是 HTML 新手，所以没有任何错误，我无法真正找到问题所在。从我的课本中，我几乎复制了这个例子并将它们更改为我自己的偏好。任何想法都会有所帮助，谢谢。
这是我的完整代码：
.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>【问题讨论】：
-
你的验证器很奇怪。您在 HTML 中有
//* ... *//- 不正确。它必须是<!-- ... -->。而且您的 CSS 中有// ... //- 也不正确，它必须是/* ... */。 -
作为@johnc.j。说，删除所有这些，你的代码就可以工作了
-
另外，第一个li标签没有关闭
-
@john c.j 我在这里添加了这些，它们不在我的代码中。 @Loonqual，谢谢！
标签： css html html-table colgroup