色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

CSS中不同背景顏色的表格標題單元格(th)

CSS
錢浩然2年前8瀏覽0評論

我用下面的CSS樣式以正確的格式顯示表格數據，但是我想用不同的顏色顯示表格標題的背景...

我怎樣才能只修改下面的CSS來達到同樣的效果 也就是說，每個TH3、TH5都應該有藍色背景(除了第一個TH1 -它將有默認的紅色背景) 而TH2，TH4，TH6應該有黃色背景。

我已經試過第n個孩子選擇器，我在某處讀到過th+th兩種方式都不工作。

<style type="text/css">
    table {
           /*...all table attributes like fontsize etc*/
            font-size:11px;
            color:#333333;                
    }
    table th {
            /*...all th attributes like padding etc*/
            background-color:#d4e3e5;
            padding: 8px;
    }
    table td {
            /*...all td attributes like padding etc*/
            padding: 8px;
    }
    </style>

感謝所有的回復，但是第n個孩子選擇器不工作，我已經試過了。有什么基本的方法可以修改CSS并達到同樣的效果嗎？

小提琴

第n個孩子在工作。

th:nth-child(odd) {
     background-color:red; // Replace it with your desired color
 }

 th:nth-child(even) {
     background-color: yellow;
 }

如果你有進一步的問題，張貼你的HTML和CSS。

你也可以試試這個

table th:odd {
    background-color:#000; //Replace it with your desired color
}

table th:odd {
    background-color:#f00; //Replace it with your desired color
}

或者你可以嘗試選擇第n個元素。

th:nth-child(n) {
    background-color:red; // Replace it with your desired color
}

試試這個。

th:nth-child(odd) { 
    background-color:blue; 
}

th:nth-child(even) {
     background-color:yellow; 
}

<!DOCTYPE html>
<html>
<head>
    <style>
        th:nth-child(odd){ background-color:blue; }
        th:nth-child(even){ background-color:yellow; }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>heading</th>
            <th>heading1</th>
        </tr>
        <tr>
            <td>xxx</td>
            <td>yyy</td>
        </tr>
        <tr>
            <td>xxx1</td>
            <td>yyy1</td>
        </tr>
    </table>
</body>
</html>

為了尋址表格頭(th)的特定單元格位置，我使用了以下代碼:

th:n-child(4){ background-color:# 7 F7 f 7 f；}

4 =表頭左側第四個位置(th)

TH3，TH5應該有藍色背景(除了第一個TH1 -它將有默認的紅色背景)，而TH2，TH4，TH6應該有黃色背景。

如果我的理解是正確的，你正在尋找這樣的東西。

超文本標記語言

<table>
    <thead>
        <tr>
            <th>Header1</th>
            <th>Header2</th>
            <th>Header3</th>
            <th>Header4</th>
            <th>Header5</th>
            <th>Header6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
    </tbody>
</table>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

table,tr,th,td{
/*...all table attributes like fontsize etc*/
   font-size:11px;
   color:#333333;
   border-collapse:collapse;
   border:1px solid;
}

table tr>th{
   background-color:red;
   padding:8px;
    }
table tr>th:nth-child(odd):not(:nth-child(1)){
    background-color:blue;
    padding:8px;
}
table tr>th:nth-child(even){
    background-color:yellow;
    padding:8px;
}