你能在CSS中定義<col>標籤（帶類）並將它們應用到多個表中嗎？

是否可以爲特定類的表定義列並重用它？你能在CSS中定義<col>標籤（帶類）並將它們應用到多個表中嗎？

，比如我有一個頁面上兩個表，我想他們的列對齊，所以目前它們都具有類似DEFS：

<table class='grid'> 
    <col class='col-name' /> 
    <col class="col-access-type" /> 
    <col class="col-auto-grant" /> 
    <col class="col-auto-revoke" /> 
    <col class="col-can-assign" /> 
    <col class="col-actions" />

但理想我想定義他們重新使用山坳標籤曾經在說CSS讓我簡單地寫

<table class='grid'>

和CSS：

table.grid 
{ 
columns: {erm ok so what is it?} 
}

是這樣可能嗎？

來源

2011-05-18 jenson-button-event

在HTML和CSS，沒有（這不會是對CSS的工作，因爲無論如何，你想要做的是什麼與內容相關，而不是演示文稿）。但是，使用預編譯的僞語言（如HAML）之一可能是可行的 - 您是否願意使用類似的東西？ – 2011-05-18 08:31:07

是的，你可以。但它是一個什麼有效，什麼不可行的問題。 – 2011-05-18 09:07:34

@Pekka，肯定HAML會保持代碼幹，我喜歡HAML，但是這個項目不可能。 – 2011-05-18 09:17:06

您可以使用一點jQuery腳本來做到這一點，因此對於每個包含grid類的表，如果將所需的類應用於col，例如，

$(function() { 
    $("table.grid col:eq(0)").addClass("col-name"); 
    $("table.grid col:eq(1)").addClass("col-access-type"); 
    // etc. 
});

來源

2011-05-18 08:39:19

它的工作原理和它的幹，但它不可降解，並且在js禁用的瀏覽器上看起來相當醜陋... – 2011-05-18 09:18:41

在我看來，你正在尋找的答案是CSS3 s nth-of-type（）`選擇器。

這將允許你做這樣的事情：

table.grid td:nth-of-type(1) { .... } 
table.grid td:nth-of-type(2) { .... } 
table.grid td:nth-of-type(3) { .... }

等

然而，這種主要的問題是，它不是在IE8或更低的支持，所以，除非你的用戶人口統計與規範大不相同，你無法使用它。

我不知道任何其他解決方案，可以讓您避免重複您的列結構。抱歉。

[編輯]

其實，大概nth-of-type()會比nth-child()在這種情況下更好。

瀏覽器兼容性圖表見http://www.quirksmode.org/css/contents.html，並http://www.quirksmode.org/css/nthchild.html的使用（既包括nth-of-type和nth-child）

來源

2011-05-18 10:34:47 Spudley

你能在CSS中定義<col>標籤（帶類）並將它們應用到多個表中嗎？

回答

相關問題