HTML col class 选择器

Question

我在让 class 选择器 .table-heading-column 在 CSS 中工作时遇到问题。

我通过验证器运行这个，我的 HTML 或 CSS 都没有错误。我已经用尽了所有我能想到的修复方法。我是 HTML 的新手，所以没有任何错误我无法真正找到问题所在。从我的 class 书中，我几乎复制了示例并将它们更改为我自己的偏好。任何想法都会有所帮助，谢谢。

这是我的完整代码：

.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">&laquo; 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>

Answer 1

此规则会覆盖您的列/列组样式：

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") 在 HTML 结构中较低，这意味着上面的规则更具体，它将覆盖你的 col/colgroup 风格。

.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">&laquo; 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>

HTML col class 选择器

HTML col class selector

html

css

html-table

colgroup