css html表及其忽略表thead？

我正在使用下面提到的CSS代碼來顯示我的帖子中的表。但它顯示錶頭和黑暗的bule顏色的第一行。我的要求是隻有深色的顯示錶頭。css html表及其忽略表thead？

這裏是我正在使用的代碼。請指導我

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

來源

2016-12-25 raja

可以提供你的HTML嗎？ – Taki

我在發佈的CSS中看到* nothing *甚至是針對'thead'或'th'標籤....我是否錯過了它？ – Scott

使用<thead> HTML標記在您的<table>然後給它賦予.CSSTableGenerator tr:first-child td如下面的風格。

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

來源

2016-12-25 19:26:27

表顯示像這樣。 [鏈接]（http://imgur.com/a/Om7fB） – raja

你運行我的代碼片段？這不是你想要的嗎？ –

請檢查此鏈接 - [image]（http://imgur.com/a/4P1bW）。現在桌子看起來像這樣 – raja

款式只有細胞的表頭，簡單地做這樣的

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>

來源

2016-12-25 19:34:48 LGSon

css html表及其忽略表thead？

回答

相關問題