CSS表格填充

我正在学习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：我真的来自俄罗斯，所以对不起坏英语

来源

2011-06-15 Anton

如果你想具体样式添加到该表中覆盖默认样式您已经定义了，那么你需要一些方法在CSS中引用它。

通常情况下，你想给它一个类或ID - 例如：<table class='myspecialtable'>....</table>

然后你就可以拥有它覆盖默认5px的样式，只是这个表的样式表。

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

如果您不能ID或类添加到这个表，那么你可以将其添加父元素上，效果是相同的（只要是家长不包含任何其他表格，当然）。在这种情况下，你的CSS会是这个样子：

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

来源

2011-06-15 12:53:46 Spudley

谢谢，它的工作原理！ – Anton 2011-06-15 12:56:34

你应该改变你的CSS定义样式代替。

.padded { ... }

然后你可以设置class到样式要使用该样式的任何表。

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

当您设置一个风格，你所做的一切，对于一个特定的类型，然后将其删除的唯一途径的所有元素是设置样式为别的，或者不包括对CSS参考文件从您不想使用它们的页面。

来源

2011-06-15 12:51:50

应该是.padded {...}类 – locrizak 2011-06-15 12:52:40

'＃padded'表示您需要使用'id =“padded”' – 2011-06-15 12:53:04

.padded {...}将定义一个类。 #padded只会将样式应用于id =“padded”的表格 – 2011-06-15 12:53:26

<table cellpadding='0'>如果不工作，你可以创建一个CSS类，去除填充和使用，在你的表：<table class='no_padding'>

来源

2011-06-15 12:52:19

一个办法是给你的表一类，像这样：

<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的填充。

来源

2011-06-15 12:54:57

简单使用

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

也可以尝试border-collapse: collapse;。

来源

2011-06-15 12:55:07

我记得我刚开始学习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将是一个不错的主意。这将向您介绍基本知识并帮助您走上正轨。

来源

2011-06-15 12:55:51

CSS表格填充

回答

相关问题