簡單的CSS：格式化多個表

Question

我有一個相當簡單的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> 

我知道有一個更好的方法來完成這個比co不斷重複「firstTable」和「secondTable」類。

我試圖做的事情是這樣的：

CSS：

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

然後

HTML：

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

，但沒有奏效。

我錯過了什麼？

謝謝！

Answer 1

你應該更多地看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; 
} 

and a demo

PS：font-color不是CSS屬性，它應該只是color

Answer 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

Answer 3

這不工作？

.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>