2011-06-15 152 views
2

我正在學習CSS和HTML。 在我的代碼有:CSS表格填充

<style> 
table, td, th 
{ 
padding: 5px; 
} 
</style> 

此規則適用於網頁上的所有表。 現在我想打一個表不填充: 這裏是源:

<table> 

    <tr> 
    <td>Login</td> 
    <td><input type="text" name="login" class="input"></td> 
    </tr> 

    <tr> 
    <td>Password</td> 
    <td><input type="password" name="password" class="input"></tr> 
    </tr> 

</table> 

如何做到這一點?提前致謝。

P.S:我真的來自俄羅斯,所以對不起壞英語

回答

2

如果你想具體樣式添加到該表中覆蓋默認樣式您已經定義了,那麼你需要一些方法在CSS中引用它。

通常情況下,你想給它一個類或ID - 例如:<table class='myspecialtable'>....</table>

然後你就可以擁有它覆蓋默認5px的樣式,只是這個表的樣式表。

.myspecialtable, .myspecialtable td, .myspecialtable th { 
    padding: 0px; 
} 

如果您不能ID或類添加到這個表,那麼你可以將其添加父元素上,效果是相同的(只要是家長不包含任何其他表格,當然)。在這種情況下,你的CSS會是這個樣子:

.myspecialtablecontainer table, .myspecialtablecontainer td, .myspecialtablecontainer th { 
    padding: 0px; 
} 
+0

謝謝,它的工作原理! – Anton 2011-06-15 12:56:34

1

你應該改變你的CSS定義樣式代替。

.padded { ... } 

然後你可以設置class到樣式要使用該樣式的任何表。

<table class="padded"> 
</table> 

當您設置一個風格,你所做的一切,對於一個特定的類型,然後將其刪除的唯一途徑的所有元素是設置樣式爲別的,或者不包括對CSS參考文件從您不想使用它們的頁面。

+0

應該是.padded {...}類 – locrizak 2011-06-15 12:52:40

+1

'#padded'表示您需要使用'id =「padded」' – 2011-06-15 12:53:04

+0

.padded {...}將定義一個類。 #padded只會將樣式應用於id =「padded」的表格 – 2011-06-15 12:53:26

0

<table cellpadding='0'>如果不工作,你可以創建一個CSS類,去除填充和使用,在你的表:<table class='no_padding'>

1

一個辦法是給你的表一類,像這樣:

<table class="nopadding"> 
[... table rows and columns...] 
</table> 

然後把這個在你的CSS:

.nopadding, .nopadding td, .nopadding th 
{ 
    padding: 0; 
} 

其中說「任何具有類的元素應該有一個填充0」。 .nopadding th和.nopadding td必須在那裏,並且是一種說法,「所有thop和td誰在類nopadding的元素中都不應該有任何填充」,因爲您之前告訴所有th和td都有一個5px的填充。

1

簡單使用

<style> 
table, td, th 
{ 
    padding: 0px; 
} 
</style> 

也可以嘗試border-collapse: collapse;

1

我記得我剛開始學習HTML時。

您所追求的是ID類別屬性。你有兩個表所示:

<table class="table1"> 

    <tr> 
    <td>Login</td> 
    <td><input type="text" name="login" class="input"></td> 
    </tr> 

    <tr> 
    <td>Password</td> 
    <td><input type="password" name="password" class="input"></tr> 
    </tr> 

</table> 

<table class="table2"> 

    <tr> 
    <td>Login</td> 
    <td><input type="text" name="login" class="input"></td> 
    </tr> 

    <tr> 
    <td>Password</td> 
    <td><input type="password" name="password" class="input"></tr> 
    </tr> 

</table> 

要提出的是,使表1有填充物,但表2沒有,你可以使用相應的CSS規則來識別和樣式表:

.table1, .table1 td, .table1 th 
{ 
padding: 5px; 
} 

.table2, .table2 td, .table2 th 
{ 
padding: 0px; 
} 

有很多方法可以用CSS做到這一點。例如,在這種情況下,您也可以使用ids,但使用類更容易,因爲id只能在每個文檔中使用一次。

在這種情況下,稍好的方法是利用級聯規則。我也許會把你原來的CSS和剛添加的第二組規則:

.table, .table td, .table th 
{ 
padding: 5px; 
} 

.table2, .table2 td, .table2 th 
{ 
padding: 0px; 
} 

在這種情況下,只有用類表2表將有0像素填充 - 所有其他表將有5像素的填充。

閱讀W3C學校對CSS的介紹 - http://www.w3schools.com/css/css_intro.asp將是一個不錯的主意。這將向您介紹基本知識並幫助您走上正軌。