如何在 CSS 表中设置 wiki 表格格式化类？答案

【问题标题】：How do I set up a wiki table formatting class in a CSS sheet?如何在 CSS 表中设置 wiki 表格格式化类？
【发布时间】：2019-11-03 21:55:07
【问题描述】：

我正在尝试为我正在构建的 wiki 上的表格设置一个格式化类，但我在非常基本的 CSS 知识上碰壁了。按照在线教程，我尝试在 CSS 表中创建一个 .navbox 类并更改 table、th 和 td 的设置，但我遇到了错误消息。

据我所知：

.navbox {
    border: 2px solid black;
    th {
        background-color: gray;
    }
}

Fandom 的内置编译器在第 3 行第 8 列出现错误消息，在最后一行显示“第 6 行第 1 列出现意外的标记 '}'” .

我要制作这张桌子：https://aeon14.fandom.com/wiki/Template:New_Canaan_system

...看起来像这样：https://memory-beta.fandom.com/wiki/Template:Ships_named_Enterprise

【问题讨论】：

这是SCSS 语法。您使用的编译器支持吗？如果没有，您应该从.navbox 中删除th：.navbox th { background-color: gray; }。

标签： css wiki

【解决方案1】：

我看到你使用了一些 SCSS 语法而不是 CSS

试试这个：

.navbox {
    border: 2px solid black;
}
.navbox th {
    background-color: gray;
}

【讨论】：

好的，我明白了。我必须在单独的部分中编辑单个 HTML 命令。没有意识到。（就像我说的，我在这方面真的很陌生。）

【解决方案2】：

请检查此代码并在您的代码中实现它，并在 CSS 中更改您想要的颜色值。

#customers {
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}
#customers thead th{
  background-color: gray;
}
#customers tbody th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #d7d7d7;
  color: white;
}

<table id="customers">
  <thead>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    </tr>
  </thead>
  <tbody>
  <tr>
    <th>Alfreds Futterkiste</th>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <th>Berglunds snabbköp</th>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <th>Centro comercial Moctezuma</th>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <th>Ernst Handel</th>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <th>Island Trading</th>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <th>Königlich Essen</th>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <th>Laughing Bacchus Winecellars</th>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <th>Magazzini Alimentari Riuniti</th>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <th>North/South</th>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <th>Paris spécialités</th>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
  </tbody>
</table>

【讨论】：