CSS表格填充

如何解决CSS表格填充

| 我正在学习CSS和HTML。 在我的代码中，我有：

<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>

这该怎么做？     

解决方法

        如果要向该表添加特定样式以覆盖已定义的默认样式，则需要某种方式在CSS中对其进行引用。 通常，您会给它一个类或ID-例如

<table class=\'myspecialtable\'>....</table>

然后，您可以拥有一个样式表，该样式表将覆盖此表的默认5px样式。

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

如果您不能在此表中添加ID或类，则可以将其添加到父元素上，其效果将是相同的（当然，只要该父级不包含任何其他表） 。在这种情况下，您的CSS将如下所示：

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

    ,        您应该更改CSS来定义样式。

.padded { ... }

然后，您可以为要使用该样式的任何表设置ѭ6。

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

为特定类型的所有元素设置样式后，唯一的方法是将样式设置为其他样式，或者不从您所引用的页面中包含对该CSS文件的引用\不想使用它们。     ,        一种方法是给您的表一个这样的类：

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

然后将其放在您的CSS中：

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

上面写着“该类的任何元素都应填充0”。 .nopadding th和.nopadding td必须存在，并且是一种表示“在nopadding类的元素内的所有thd和td也不应该有任何填充”的一种方式，因为您之前已经告诉过所有td的填充为5px。     ,        我第一次开始学习HTML时会记得。 您需要的是id或class属性。您将有两个表，如下所示：

<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>

为了使table1有填充，而table2没有填充，您将使用适当的CSS规则来标识和设置表样式：

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

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

我可以使用CSS进行多种操作。例如，在这种情况下，您也可以使用id，但是使用类更容易，因为每个文档只能使用一次id。 在这种情况下，一种更好的方法是利用级联规则。我本可以保留原始CSS，然后添加第二组规则：

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

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

在这种情况下，只有具有table2类的表的填充为0px-其他所有表的填充为5px。 阅读W3CSchools CSS简介-http://www.w3schools.com/css/css_intro.asp是一个好主意。这将为您介绍基础知识，并助您一臂之力。     ,        使用简单

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

也尝试

border-collapse: collapse;

。     ,        

<table cellpadding=\'0\'>

如果这样不起作用，则可以创建一个css类来删除填充并在表中使用它：

<table class=\'no_padding\'>