简单的 CSS：格式化多个表格答案

【问题标题】：Simple CSS: Formatting multiple tables简单的 CSS：格式化多个表格
【发布时间】：2014-04-09 08:34:00
【问题描述】：

我有一个相当简单的 CSS 问题。

我想创建一个遵循特定格式的表格。我想在同一页面上以不同的方式格式化多个表格。

我有这个：

CSS：

table.firstTable
{
    border: 1px solid black;
}
td.firstTable
{
    border: 1px solid black;
}
th.firstTable
{
    border: 1px solid black;
    background: #00003f;
    font-color: #cfffff;
}
table.secondTable
{
    border: 1px solid red;
}
td.secondTable
{
    border: 1px solid red;
    font-family: sans-serif;
}
th.secondTable
{
    border: 1px solid red;
    background: #cfffff;
    font-color: #00003f;
}

我可以这样创建表的唯一方法是：

HTML：

<table class="firstTable">
  <tr>
    <th class="firstTable">Item</th>
    <th class="firstTable">Quantity</th>
    <th class="firstTable">Price</th>
  </tr>
  <tr>
    <td class="firstTable">0-001</td>
    <td class="firstTable">Computer</td>
    <td class="firstTable">$299.99</td>
  </tr>
  ...
</table>

<table class="secondTable">
  <tr>
    <th class="secondTable">Customer ID</th>
    <th class="secondTable">Total Sales</th>
  </tr>
  <tr>
    <td class="secondTable">10001</td>
    <td class="secondTable">$39.94</td>
  </tr>
  ...
</table>

我知道有一个比不断重复“firstTable”和“secondTable”类更好的方法。

我尝试过这样的事情：

CSS：

#firstTable table
{
    border: 1px solid black;
}
#firstTable th
...

然后

HTML：

<div id="firstTable">
<table>
...
</table>
</div>

但是没有用。

我错过了什么？

【问题讨论】：

标签： css html-table

【解决方案1】：

这样不行吗？

.firstTable th td
{
border: 1px solid black;
}

.firstTable th
{
background: #00003f;
color: #cfffff;
}

.secondTable
{
border: 1px solid red;
}

.secondTable th
{
background: #cfffff;
color: #00003f;
}

.secondTable td
{
font-family: sans-serif;
}

<table class="firstTable">
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>0-001</td>
<td>Computer</td>
<td>$299.99</td>
</tr>
</table>

<table class="secondTable">
<tr>
<th>Customer ID</th>
<th>Total Sales</th>
</tr>
<tr>
<td>10001</td>
<td>$39.94</td>
</tr>
</table>

【讨论】：

请解释您的修复功能，而不仅仅是发布修复。看到这个我不知道你在暗示什么。
修复是对原始帖子的回应。他解释了他在寻找什么。

【解决方案2】：

我认为您正在寻找的是 CSS3 nth-of-type 选择器。

CSS：

table:nth-of-type(odd) {
    border: 1px solid black;
}
table:nth-of-type(odd) td {
    border: 1px solid black;
}

这应该允许您选择偶数和奇数表，例如示例here

请注意，这在旧版本的 IE（8 及以下）中不起作用，但您应该能够使用 https://stackoverflow.com/a/4742560/3387154 解决这个问题

【讨论】：

【解决方案3】：

您应该更多地查看selectors（这是非常基本的 CSS）。

您可以使用element.withClass element 在具有类的元素中选择一个元素。这样你就不需要给所有的td 和th 一个类，而只需要父元素，在这种情况下是table：

HTML：

<table class="firstTable">
  <tr>
    <th>Item</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>0-001</td>
    <td>Computer</td>
    <td>$299.99</td>
  </tr>
  ...
</table>

<table class="secondTable">
  <tr>
    <th>Customer ID</th>
    <th>Total Sales</th>
  </tr>
  <tr>
    <td>10001</td>
    <td>$39.94</td>
  </tr>
  ...
</table>

CSS：

.firstTable
{
    border: 1px solid black;
}
.firstTable td
{
    border: 1px solid black;
}
.firstTable th
{
    border: 1px solid black;
    background: #00003f;
    color: #cfffff;
}
.secondTable
{
    border: 1px solid red;
}
.secondTable td
{
    border: 1px solid red;
    font-family: sans-serif;
}
.secondTable th
{
    border: 1px solid red;
    background: #cfffff;
    color: #00003f;
}

还有一个demo

PS：font-color 不是 CSS 属性，它应该只是 color

【讨论】：