繪製HTML表頭

Question

我有這樣

<table class="dgrid" rules="all" id="Gridview2" style="border-collapse: collapse;" cellspacing="0" border="1"> 
    <tbody> 
     <tr> 
      <th scope="col">HEADER 1</th> 
      <th scope="col">HEADER 2</th> 
      <th scope="col">HEADER 3</th> 
      <th scope="col">HEADER 4</th> 
     </tr> 
     <tr> 
      <td>DATA 1</td> 
      <td>DATA 2</td> 
      <td>DATA 3</td> 
      <td>DATA 4</td> 
     </tr> 
    </tbody> 
</table> 

基於這種結構

表結構，我想提請標題表顏色。我做這個CSS，但什麼都沒有發生

<style> 
    .dgrid th scope { 
     color: #18bc9c; 
    } 
</style> 

Answer 1

您需要使用屬性選擇[attribute="value"]

.dgrid th[scope="col"] { 
 
    color: #18bc9c; 
 
}

<table class="dgrid" rules="all" id="Gridview2" style="border-collapse: collapse;" cellspacing="0" border="1"> 
 
    <tbody> 
 
    <tr> 
 
     <th scope="col">HEADER 1</th> 
 
     <th scope="col">HEADER 2</th> 
 
     <th scope="col">HEADER 3</th> 
 
     <th scope="col">HEADER 4</th> 
 
    </tr> 
 
    <tr> 
 
     <td>DATA 1</td> 
 
     <td>DATA 2</td> 
 
     <td>DATA 3</td> 
 
     <td>DATA 4</td> 
 
    </tr> 
 
    </tbody> 
 
</table>