爲表格設置CSS樣式

Question

我在HTML頁面中有幾個表格。但是對於每個表格，我都希望應用不同的CSS樣式。如果我使用這個代碼，我將爲每個表應用樣式。

th, td { 
    padding-right: 10px; 
    padding-top: 7px; 
    padding-bottom: 7px; 
} 

我如何才能將樣式應用於一張桌子？

我想這

.intro{ 
    th, td { 
     padding-right: 10px; 
     padding-top: 7px; 
     padding-bottom: 7px; 
     /* margin: 10px;*/ 
    }} 

Answer 1

使用class或id爲所需的表。檢查下面的例子。

.mystyle th, 
 
.mystyle td { 
 
    padding-right: 10px; 
 
    padding-top: 7px; 
 
    padding-bottom: 7px; 
 
    background-color: palegreen; 
 
}

<b><i>Only this table will have the specified styles</i></b> 
 
<table class="mystyle"> 
 
    <tr> 
 
    <th>Title 1</th> 
 
    <th>Title 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Content 1</td> 
 
    <td>Content 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Content 3</td> 
 
    <td>Content 4</td> 
 
    </tr> 
 
</table> 
 

 
<hr> 
 

 
<b><i>This table doesn't inherit the styles</i></b> 
 

 
<table> 
 
    <tr> 
 
    <th>Title 1</th> 
 
    <th>Title 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Content 1</td> 
 
    <td>Content 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Content 3</td> 
 
    <td>Content 4</td> 
 
    </tr> 
 
</table>

Answer 2

每個表需要被賦予一個唯一的類，然後可以特別有針對性。

HTML：

<table class="first"> 
    <!--table elements--> 
</table> 
<table class="second"> 
    <!--table elements--> 
</table> 

CSS：

table.first th, table.first td{ 
    /*properties*/ 
} 
table.second th, table.second td{ 
    /*properties*/ 
}