使用CSS的替代表格行顏色？

393

tr.d0 td { 
 
    background-color: #CC9999; 
 
    color: black; 
 
} 
 
tr.d1 td { 
 
    background-color: #9999CC; 
 
    color: black; 
 
}

<table> 
 
    <tr class="d0"> 
 
    <td>One</td> 
 
    <td>one</td> 
 
    </tr> 
 
    <tr class="d1"> 
 
    <td>Two</td> 
 
    <td>two</td> 
 
    </tr> 
 
</table>

這裏我使用類tr，但我想只能使用table。當我使用班級比這更適用於tr替代。

我可以用CSS寫這樣的HTML嗎？

<table class="alternate_color"> 
    <tr><td>One</td><td>one</td></tr> 
    <tr><td>Two</td><td>two</td></tr> 
    </table>

如何使行使用CSS「斑馬條紋」？

來源

2010-06-21 Kali Charan Rajput

我創建使用第n個孩子）所有可能的模式（演示 - http://xengravity.com/demo/nth-child/ – xengravity 2015-05-04 02:09:43

693

$(document).ready(function() 
 
{ 
 
    $("tr:odd").css({ 
 
    "background-color":"#000", 
 
    "color":"#fff"}); 
 
});

tbody td{ 
 
    padding: 30px; 
 
} 
 

 
tbody tr:nth-child(odd){ 
 
    background-color: #4C8BF5; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1"> 
 
<tbody> 
 
<tr> 
 
<td>1</td> 
 
<td>2</td> 
 
<td>3</td> 
 
<td>4</td> 
 
</tr> 
 
<tr> 
 
<td>5</td> 
 
<td>6</td> 
 
<td>7</td> 
 
<td>8</td> 
 
</tr> 
 
<tr> 
 
<td>9</td> 
 
<td>10</td> 
 
<td>11</td> 
 
<td>13</td> 
 
</tr> 
 
</tbody> 
 
</table>

有一個CSS選擇器，一個真正的僞選擇，被稱爲第n個孩子。在純CSS，你可以做到以下幾點：

tr:nth-child(even) { 
    background-color: #000000; 
}

注：在IE 8不支持

或者，如果您有jQuery的：

$(document).ready(function() 
{ 
    $("tr:even").css("background-color", "#000000"); 
});

來源

2010-06-21 11:43:21

，因此也可以更改交替行的超鏈接顏色。我需要不同的超鏈接顏色，偶數行和奇數。謝謝 – 2013-02-08 04:30:15

下面是IE7/8的另一個解決方案：http://stackoverflow.com/questions/4742450/ – Kevin 2013-05-29 19:11:36

很好的答案！但僅供參考，還有另一個CSS選擇器可以使用。 'tr：第n種（奇數/偶數）' – 2014-05-27 10:18:49

109

你有:nth-child()僞類：

table tr:nth-child(odd) td{ 
} 
table tr:nth-child(even) td{ 
}

在:nth-child()初期的browser support是有點差。這就是爲什麼設置class="odd"成爲這樣一個常見的技術。在2013年底，我很高興地說IE6和IE7終於死了（或者生病足以停止關心），但IE8仍然在附近 - 幸運的是，這是the only exception。

來源

2010-06-21 11:41:40

三年多後和支持是相當好。 – 2013-12-04 15:09:43

首選答案，因爲它不會將CSS應用於標頭 – Mike 2015-06-01 15:51:22

但是，並非所有瀏覽器（ie 6-8, ff v3.0）都支持這些規則，因此大多數解決方案都回退到某種形式的javascript/jquery解決方案，以便將這些類添加到這些行的非空行兼容的瀏覽器來獲得老虎條紋效果。

來源

2010-06-21 11:41:55 redsquare

<script type="text/javascript"> 
$(function(){ 
    $("table.alternate_color tr:even").addClass("d0"); 
    $("table.alternate_color tr:odd").addClass("d1"); 
}); 
</script>

來源

2010-06-21 11:43:34

+45

好吧我知道jQuery在這個網站上相當普遍，但不管你不應該發佈jQuery沒有解釋。這個腳本不會自行工作。 – DisgruntledGoat 2010-06-21 12:36:39

能我寫我的HTML這樣使用 css？

當然可以，但是，那麼你將不得不使用:nth-child()僞選擇器（這雖然有有限的支持）：

table.alternate_color tr:nth-child(odd) td{ 
    /* styles here */ 
} 
table.alternate_color tr:nth-child(even) td{ 
    /* styles here */ 
}

來源

2010-06-21 11:45:24 Sarfraz

一個bg顏色正在工作，但第二個bg顏色不是。 – 2010-06-21 11:51:27

有一個相當簡單的方法在PHP中做到這一點，如果我瞭解您的查詢，我假設您使用PHP編碼，並且您正在使用CSS和JavaScript來增強輸出。

數據庫的動態輸出將攜帶for循環來遍歷結果，然後將結果加載到表中。只是一個函數調用添加到這樣的：

echo "<tr style=".getbgc($i).">"; //this calls the function based on the iteration of the for loop.

那麼函數添加到網頁或庫文件：

function getbgc($trcount) 
{ 

$blue="\"background-color: #EEFAF6;\""; 
$green="\"background-color: #D4F7EB;\""; 
$odd=$trcount%2; 
    if($odd==1){return $blue;} 
    else{return $green;}

}

現在，這個會動態色彩之間的每一個新交替生成的表格行。

這比用CSS搞砸更容易，它不適用於所有瀏覽器。

希望這會有所幫助。

來源

2013-03-13 16:06:11 mark

謝謝@mark。這不是修復該網站將在PHP，.net或簡單的HTML。 – 2013-03-14 06:08:27

只需將以下內容添加到您的html代碼（<head>），即可完成。

HTML：

<style> 
     tr:nth-of-type(odd) { 
     background-color:#ccc; 
    } 
</style>

比jQuery的例子更容易和更快。

來源

2014-03-21 19:33:49 bmich72

這應該是被接受的答案。儘可能地，CSS應該處理樣式，而javascript可以用來處理其他事情。 – 2015-12-02 14:33:12

以上大部分代碼都不適用於IE版本。適用於IE +其他瀏覽器的解決方案就是這樣。

<style type="text/css"> 
     tr:nth-child(2n) { 
      background-color: #FFEBCD; 
     } 
</style>

來源

2014-04-23 08:06:31

我們可以使用奇數和偶數的CSS規則和jQuery方法交替行的顏色

使用CSS

table tr:nth-child(odd) td{ 
      background:#ccc; 
} 
table tr:nth-child(even) td{ 
      background:#fff; 
}

使用jQuery

$(document).ready(function() 
{ 
    $("table tr:odd").css("background", "#ccc"); 
    $("table tr:even").css("background", "#fff"); 
});

table tr:nth-child(odd) td{ 
 
      background:#ccc; 
 
} 
 
table tr:nth-child(even) td{ 
 
      background:#fff; 
 
}

<table> 
 
    <tr> 
 
    <td>One</td> 
 
    <td>one</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Two</td> 
 
    <td>two</td> 
 
    </tr> 
 
</table>

來源

2017-01-17 07:36:46

使用CSS的替代表格行顏色？

回答

相關問題