最快的方式來使用CSS的HTML表格，而不會影響另一個HTML表格

我的CSS位於http://sillybean.net/css/seaglass.css，我想用這個CSS只有一個HTML表，在同一頁上我有多個HTML表，所以我不想影響其他html表格。在http://sillybean.net/css/seaglass.css上進行少量修改的最快方式是什麼？最快的方式來使用CSS的HTML表格，而不會影響另一個HTML表格

來源

2009-06-19 cometta

你可以將一個類應用到你想要影響的表，然後在你的CSS中使用該類？

在你的HTML，你可以把：

<table class="mytable"> 
... CONTENT OF THE TABLE, AS NORMAL ... 
</table>

然後，類選擇添加到您的CSS：

table.mytable { border-collapse: collapse; border: 1px solid #839E99; 
       background: #f1f8ee; font: .9em/1.2em Georgia, "Times New Roman", Times, serif; color: #033; } 
.mytable caption { font-size: 1.3em; font-weight: bold; text-align: left; padding: 1em 4px; } 
.mytable td, 
.mytable th { padding: 3px 3px .75em 3px; line-height: 1.3em; } 
.mytable th { background: #839E99; color: #fff; font-weight: bold; text-align: left; padding-right: .5em; vertical-align: top; } 
.mytable thead th { background: #2C5755; text-align: center; } 
.mytable .odd td { background: #DBE6DD; } 
.mytable .odd th { background: #6E8D88; } 
.mytable td a, 
.mytable td a:link { color: #325C91; } 
.mytable td a:visited { color: #466C8E; } 
.mytable td a:hover, 
.mytable td a:focus { color: #1E4C94; } 
.mytable th a, 
.mytable td a:active { color: #fff; } 
.mytable tfoot th, 
.mytable tfoot td { background: #2C5755; color: #fff; } 
.mytable th + td { padding-left: .5em; }

來源

2009-06-19 05:07:33 MiffTheFox

事實上，這幾乎是像「命名空間」你的CSS定義。 – 2009-06-19 05:08:32

我到目前爲止不是CSS專家 - 但根據我的測試，上面的CSS中至少有一個錯誤：`.mytable td，th {/ * ... * /}`隻影響`td`（單元格）有'mytable'類（因爲表類） - **但**它影響**所有表頭**`th`。恕我直言，正確的語法必須是：`.mytable td，.mytable th {/ * ... * /}`。（在Chrome，Firefox和IE的當前版本中測試過） – 2015-11-25 08:04:00

應用類的名稱，您要申請表css休息很好...

來源

2009-06-19 05:08:58

這正是id和class屬性的用途。如果您不能更改標記（如造型myspace），那麼您需要使用選擇器更精確地定位一個表格。選擇器的選擇是你需要自己決定的。

來源

2009-06-19 05:10:06 SpliFF

在你的CSS中定義一個ID或CLASS，這會影響到有問題的表。

然後，在你的HTML代碼，說

<table id="theid"... />

或

<table class="theclass" ... />

CSS的ID看起來像

#theid 
{ 
    //attributes 
}

類的樣子：

.theclass 
{ 
    //attributes 
}

來源

2009-06-19 05:10:38 Sev

這裏有一流的選擇和標記將樣式表頭，但不是第二：

<style> 
table.special { border: 1px solid #839E99; ... } 
table.special caption { font-size: 1.3em; ... } 
... 
</style> 
<table class="special">...</table> 
<table>...</table>

或者你也可以用類似的方式使用ID選擇：

<style> 
#my-special-table { border: 1px solid #839E99; ... } 
#my-special-table caption { font-size: 1.3em; ... } 
... 
</style> 
<table id="my-special-table">...</table> 
<table>...</table>

有時宗教戰爭爆發出使用這兩種方法中的哪一種。兩者都可以滿足您的需求。根據規範，您只能在HTML中的至多一個元素上放置給定的ID（但大多數瀏覽器允許您打破該規則）。

來源

2009-06-19 05:13:41

雖然您應該向要影響的表添加類，但我們假設您只能修改css。在這種情況下，您可以通過selectors獲得相當高的感覺。但不是所有的browsers support他們。你可以看到CSS 2 selectors不支持第n個孩子的概念。否則，如果你有類似HTML的：

<html><head></head><body> 
<table><tr><td>First</td></tr></table> 
<table><tr><td>Second</td></tr></table> 
<table><tr><td>Third</td></tr></table> 
</body></html>

，您可以定位與CSS2選擇第一個，但第二個和第三個只能與CSS3的人進行有針對性的。

table:first-child td {background-color:red;} /* CSS2, pretty wide support */ 
table:nth-child(2) td {background-color:red;} /* CSS3, limited support */

來源

2009-06-19 05:42:21 dlamblin

對於多表和類

HTML表

<table id="tableId1"> 
--Table Content-- 
</table> 

<table id="tableId2"> 
--Table Content-- 
</table> 

<table class="tableClass1"> 
--Table Content-- 
</table> 

<table class="tableClass2"> 
--Table Content-- 
</table>

CSS腳本

#tableId1, #tableId2 
{ 
    //attributes 
} 

.tableClass1, .tableClass2 
{ 
    //attributes 
}

來源

2014-06-15 18:46:28 vineetv2821993

-1

按類別選擇表，如果你造型所需的表如有表：

<table class="tableOne"></table> 
<table class="tableTwo"></table>

然後在CSS中，你會使用這樣的：

.classOne { 
    /* do your stuff here*/ 
} 

.classTwo { 
    /* do your stuff here*/ 
}

來源

2016-07-24 18:14:52 user6632262

最快的方式來使用CSS的HTML表格，而不會影響另一個HTML表格

回答

相關問題