更改HTML表格中特定列的背景顏色

我想更改HTML表格中特定列的背景顏色。是否有可能使用屬性來做到這一點。我找到了用行來做的方法。更改HTML表格中特定列的背景顏色

tr.even { 
    background-color: white; 
}

來源

2014-02-18 user3324283

爲什麼不在列上放置一個id，以便您可以將其從css中更改？ –

$('table tr:even').css('background-color', '#e5e5e5');

來源

2014-02-18 16:18:22

您可以使用:even和:odd選擇：

$("table tr:even").css("background-color", "white"); 
$("table tr:odd").css("background-color", "red");

如果你想指定的列然後使用：

$('table tr > :nth-child(even)').css('background-color','white'); 
$('table tr > :nth-child(odd)').css('background-color','red');

來源

2014-02-18 16:18:51 Felix

-1

如果你想只用HTML和css你必須分別給每個div甚至奇數班。然後在你的css文件中爲偶數和奇數類別提供不同的css。

<tr class="even"></tr> 
<tr class="odd"></tr> 
<tr class="even"></tr> 


    tr.even { 
     background-color: white; 
    } 

    tr.odd { 
     background-color: black; 
    }

如果你想了解更多動態的方式，意味着不給類手動jQuery將檢索算法，並添加偶奇格，並給他們具體的類

使用jQuery

$('tr:odd').addClass("odd") 
$('tr:even').addClass("even")

和你的CSS

將是這樣的

tr.even { 
    background-color: white; 
} 

tr.odd { 
    background-color: black; 
}

來源

2014-02-18 16:23:21 Dexture

爲什麼你不嘗試使用colgroup標籤，並結合該機智h跨度屬性。這樣，如果你有3列，例如，你可以做

<colgroup> 
<col span="2" id="something"> 
<col id="something2"> 
</colgroup>

那麼你可以風格整個列與CSS。

例如：

#something2 {background-color:red;}

來源

2014-02-18 16:26:38 Charles

如果你正在尋找的風格列的背景，而不是一排，你可以嘗試這樣的事情（如下圖）。您需要更改選擇器以匹配您的HTML。

td:first-child { background-color: #ccc; }

下面是一個小提琴的鏈接，有辦法通過JS添加類一起。有很多方法，但是由於您正在處理列，因此請記住CSS要應用於您想要樣式化的每一行中相同的td。

JSFiddle

來源

2014-02-18 16:26:38 dward

注意：Internet Explorer 8和更早版本不支持：nth-child（）選擇器 – Dexture

您是對的@ZIP。這就是爲什麼我包括JS和/或類版本。我感覺那些仍然支持IE8的人...... – dward

對於現代的瀏覽器，你可以使用nth-child()選擇：

element:nth-child(1) { 
    background-color:... 
}

或者，如果你想使用jQuery，使用eq()：

$(element).eq(0).css("background-color","...");

_{注意： CSS nth-child選擇器是基於1的e jQuery eq選擇器是基於0的。}

來源

2014-02-18 16:45:48 Charlie

更改HTML表格中特定列的背景顏色

回答

相關問題