CSSのhtmlテーブルとその無視テーブルthead？

Question

私の投稿にテーブルを表示するには、下記のCSSコードを使用しています。表の先頭と1行目は暗い色で表示されます。私の必要条件は、暗い色でのみ表示テーブルの頭です。

ここにコードを使用しています。その後、それを、以下のように.CSSTableGenerator tr:first-child tdに与えられたスタイルを与えるあなた<table>でくれ

.CSSTableGenerator { 
    margin:0px;padding:0px; 
    width:100%; 
    box-shadow: 10px 10px 5px #888888; 
    border:1px solid #000000; 

    -moz-border-radius-bottomleft:20px; 
    -webkit-border-bottom-left-radius:20px; 
    border-bottom-left-radius:20px; 

    -moz-border-radius-bottomright:20px; 
    -webkit-border-bottom-right-radius:20px; 
    border-bottom-right-radius:20px; 

    -moz-border-radius-topright:20px; 
    -webkit-border-top-right-radius:20px; 
    border-top-right-radius:20px; 

    -moz-border-radius-topleft:20px; 
    -webkit-border-top-left-radius:20px; 
    border-top-left-radius:20px; 
}.CSSTableGenerator table{ 
    border-collapse: collapse; 
     border-spacing: 0; 
    width:100%; 
    height:100%; 
    margin:0px;padding:0px; 
}.CSSTableGenerator tr:last-child td:last-child { 
    -moz-border-radius-bottomright:20px; 
    -webkit-border-bottom-right-radius:20px; 
    border-bottom-right-radius:20px; 
} 
.CSSTableGenerator table tr:first-child td:first-child { 
    -moz-border-radius-topleft:20px; 
    -webkit-border-top-left-radius:20px; 
    border-top-left-radius:20px; 
} 
.CSSTableGenerator table tr:first-child td:last-child { 
    -moz-border-radius-topright:20px; 
    -webkit-border-top-right-radius:20px; 
    border-top-right-radius:20px; 
}.CSSTableGenerator tr:last-child td:first-child{ 
    -moz-border-radius-bottomleft:20px; 
    -webkit-border-bottom-left-radius:20px; 
    border-bottom-left-radius:20px; 
}.CSSTableGenerator tr:hover td{ 

} 
.CSSTableGenerator tr:nth-child(odd){ background-color:#aad4ff; } 
.CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }.CSSTableGenerator td{ 
    vertical-align:middle; 


    border:1px solid #000000; 
    border-width:0px 1px 1px 0px; 
    text-align:left; 
    padding:11px; 
    font-size:10px; 
    font-family:Arial; 
    font-weight:normal; 
    color:#000000; 
}.CSSTableGenerator tr:last-child td{ 
    border-width:0px 1px 0px 0px; 
}.CSSTableGenerator tr td:last-child{ 
    border-width:0px 0px 1px 0px; 
}.CSSTableGenerator tr:last-child td:last-child{ 
    border-width:0px 0px 0px 0px; 
} 
.CSSTableGenerator tr:first-child td{ 
     background:-o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f)); 
    background:-moz-linear-gradient(center top, #005fbf 5%, #003f7f 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f"); background: -o-linear-gradient(top,#005fbf,003f7f); 

    background-color:#005fbf; 
    border:0px solid #000000; 
    text-align:center; 
    border-width:0px 0px 1px 1px; 
    font-size:14px; 
    font-family:Arial; 
    font-weight:bold; 
    color:#ffffff; 
} 

Answer 1

使用<thead> htmlタグを案内してください。

.CSSTableGenerator { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    box-shadow: 10px 10px 5px #888888; 
 
    border: 1px solid #000000; 
 
    overflow: hidden; 
 
    -moz-border-radius-bottomleft: 20px; 
 
    -webkit-border-bottom-left-radius: 20px; 
 
    border-bottom-left-radius: 20px; 
 
    -moz-border-radius-bottomright: 20px; 
 
    -webkit-border-bottom-right-radius: 20px; 
 
    border-bottom-right-radius: 20px; 
 
    -moz-border-radius-topright: 20px; 
 
    -webkit-border-top-right-radius: 20px; 
 
    border-top-right-radius: 20px; 
 
    -moz-border-radius-topleft: 20px; 
 
    -webkit-border-top-left-radius: 20px; 
 
    border-top-left-radius: 20px; 
 
} 
 
.CSSTableGenerator table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.CSSTableGenerator tr:last-child td:last-child { 
 
    -moz-border-radius-bottomright: 20px; 
 
    -webkit-border-bottom-right-radius: 20px; 
 
    border-bottom-right-radius: 20px; 
 
} 
 
.CSSTableGenerator table thead { 
 
    -moz-border-radius-topleft: 20px; 
 
    -webkit-border-top-left-radius: 20px; 
 
    border-top-left-radius: 20px; 
 
} 
 
} 
 
.CSSTableGenerator tr:last-child td:first-child { 
 
    -moz-border-radius-bottomleft: 20px; 
 
    -webkit-border-bottom-left-radius: 20px; 
 
    border-bottom-left-radius: 20px; 
 
} 
 
.CSSTableGenerator tr:hover td {} .CSSTableGenerator tr:nth-child(odd) { 
 
    background-color: #aad4ff; 
 
} 
 
.CSSTableGenerator tr:nth-child(even) { 
 
    background-color: #ffffff; 
 
} 
 
.CSSTableGenerator th, 
 
.CSSTableGenerator td { 
 
    vertical-align: middle; 
 
    border: 1px solid #000000; 
 
    border-width: 0px 1px 1px 0px; 
 
    text-align: left; 
 
    padding: 11px; 
 
    font-size: 10px; 
 
    font-family: Arial; 
 
    font-weight: normal; 
 
    color: #000000; 
 
} 
 
.CSSTableGenerator tr:last-child td { 
 
    border-width: 0px 1px 0px 0px; 
 
} 
 
.CSSTableGenerator tr td:last-child { 
 
    border-width: 0px 0px 1px 0px; 
 
} 
 
.CSSTableGenerator tr:last-child td:last-child { 
 
    border-width: 0px 0px 0px 0px; 
 
} 
 
.CSSTableGenerator thead th { 
 
    background: -o-linear-gradient(bottom, #005fbf 5%, #003f7f 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #005fbf), color-stop(1, #003f7f)); 
 
    background: -moz-linear-gradient(center top, #005fbf 5%, #003f7f 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#005fbf", endColorstr="#003f7f"); 
 
    background: -o-linear-gradient(top, #005fbf, 003f7f); 
 
    background-color: #005fbf; 
 
    border: 0px solid #000000; 
 
    text-align: center; 
 
    border-width: 0px 0px 1px 1px; 
 
    font-size: 14px; 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
    color: #ffffff; 
 
}

<div class="CSSTableGenerator"> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>col1</th> 
 
     <th>col2</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     </tr> 
 
     <tr> 
 
     <td>etc</td> 
 
     <td>...</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 2

単に行うこの

table thead tr { 
 
    color: white; 
 
    background: black; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <td> 
 
     I'm white on black 
 
     </td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>I'm black on white 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>