在CSS中设置cellpadding和cellspacing吗？

在HTML表格中，cellpaddingand cellspacing可以这样设置：

<table cellspacing="1" cellpadding="1">

使用CSS如何完成相同的工作？

基本

要在CSS中控制“ cellpadding”，您只需padding在表格单元格上使用即可。例如10px的“ cellpadding”：

td { 
    padding: 10px;
}

对于“ cellspacing”，可以将border-spacingCSS属性应用于表。例如10px的“ cellspacing”：

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

该属性甚至允许单独的水平和垂直间距，而老式的“单元间距”则无法做到这一点。

IE <= 7中的问题

除了通过Internet Explorer 7的Internet Explorer，几乎在所有流行的浏览器中都可以使用，您几乎不走运。我说“几乎”是因为这些浏览器仍支持该border-collapse属性，该属性合并了相邻表格单元的边界。如果你想消除CELLSPACING（也就是cellspacing="0"），那么border-collapse:collapse应该有同样的效果：表格单元格之间没有空格。但是，此支持存在很多问题，因为它不会覆盖cellspacingtable元素上的现有HTML属性。

简而言之：对于非Internet Explorer 5-7浏览器，border-spacing您一定会满意。对于Internet Explorer，如果您的情况恰到好处（您希望0个单元格间距并且表尚未定义），则可以使用border-collapse:collapse。

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

注意：有关可应用于表以及哪些浏览器的CSS属性的概述，请参见此奇妙的Quirksmode页面。

默认

浏览器的默认行为等效于：

table {border-collapse: collapse;}
td    {padding: 0px;}

细胞填充

设置单元格内容和单元格壁之间的空间量

table {border-collapse: collapse;}
td    {padding: 6px;}

单元间距

控制表格单元格之间的空间

table {border-spacing: 2px;}
td    {padding: 0px;}

都

table {border-spacing: 2px;}
td    {padding: 6px;}

两者（特殊）

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

注意：如果已border-spacing设置，则表示border-collapse表的属性为separate。

自己尝试！

在这里，您可以找到实现此目标的旧HTML方法。

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

据我所知，在表格单元格上设置边距实际上并没有任何效果。真正的CSS等效项cellspacing是border-spacing-但在Internet Explorer中不起作用。

border-collapse: collapse如前所述，您可以用来将像元间隔可靠地设置为0，但是对于任何其他值，我认为唯一的跨浏览器方法是继续使用该cellspacing属性。

此hack适用于Internet Explorer 6和更高版本，Google Chrome，Firefox和Opera：

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

该*声明适用于Internet Explorer 6和7，其他浏览器将正确忽略它。

expression('separate', cellSpacing = '10px')返回'separate'，但是两个语句都运行，因为在JavaScript中，您可以传递比预期更多的参数，并且所有参数都将被求值。

对于那些想要非零cellpacing值的人，以下CSS对我有用，但我只能在Firefox中对其进行测试。

有关兼容性的详细信息，请参见其他地方发布的Quirksmode链接。似乎它不适用于较旧的Internet Explorer版本。

table {
    border-collapse: separate;
    border-spacing: 2px;
}

此问题的简单解决方案是：

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

另外，如果您愿意的话cellspacing="0"，请不要忘记border-collapse: collapse在table样式表中添加。

用div包裹单元格的内容，您可以做任何想做的事，但是必须将每个单元格包裹在列中才能获得统一的效果。例如，要获得更大的左右边距：

因此CSS将

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}

<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

是的，这很麻烦。是的，它可以与Internet Explorer一起使用。实际上，我仅使用Internet Explorer进行了测试，因为这是我们允许在工作中使用的全部。

仅border-collapse: collapse用于您的表，padding用于th或td。

这种风格是完全复位表 - CELLPADDING，CELLSPACING和边界。

我的reset.css文件中有以下样式：

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

TBH。对于所有对CSS的幻想，您最好只使用cellpadding="0" cellspacing="0"它们，因为它们并不被弃用...

暗示在<td>的页边空白的其他任何人显然都没有尝试过。

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

只需对表数据使用CSS填充规则：

td { 
    padding: 20px;
}

对于边框间距：

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

但是，由于box模型的diff实现，它可能会在旧版本的浏览器（如Internet Explorer）中产生问题。

从W3C分类中了解到，<table>s表示“仅”显示数据。

基于此，我发现<div>使用position: absolute;和background: transparent;... 创建具有背景和所有内容的表要容易得多，并且使用和...

它可以在Chrome，Internet Explorer（6和更高版本）和Mozilla Firefox（2和更高版本）上运行。

页边距被使用（或反正意味着）来创建容器元素，例如之间的间隔件<table>，<div>并且<form>，不<tr>，<td>，<span>或<input>。将其用于除容器元素之外的任何其他内容，将使您忙于调整网站以供将来浏览器更新。

CSS：

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

您可以使用CSS padding属性在表格单元格内轻松设置填充。这是产生与表的cellpadding属性相同效果的有效方法。

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

同样，您可以使用CSS border-spacing属性在相邻的表格单元格边界之间应用间距，例如cellspacing属性。但是，为了使边框更有效，必须将border-collapse属性的值分开，这是默认设置。

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

尝试这个：

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

或尝试以下方法：

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

我!important在边界崩溃后使用

border-collapse: collapse !important;

它在IE7中对我有用。似乎覆盖了cellpacing属性。

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-padding可以padding在CSS中指定，而cell-spacing可以通过设置border-spacingtable 来设置。

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

小提琴。

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

如果margin不起作用，请尝试设置display为trto block，然后保证金将起作用。

对于表，HTML 5中的cellpacing和cellpadding已过时。

现在，对于单元间距，您必须使用边框间距。对于cellpadding，您必须使用border-collapse。

并确保您不在HTML5代码中使用此代码。始终尝试在CSS 3文件中使用这些值。

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

在HTML表格中，cellpaddingand cellspacing可以这样设置：

对于单元填充：

只需调用简单td/th单元格即可padding。

例：

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

用于细胞间隔

只是简单 table border-spacing

例：

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

CSS样式表提供了更多表格样式，CSS样式表提供了更多样式。

您可以使用border-spacing和简单地在CSS中执行以下操作padding：

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}

<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

直接将样式添加到表本身如何？这不是table在CSS 中使用，如果页面上有多个表，这是一种BAD方法：

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

我建议这样做，并且特定表的所有单元格都会受到影响。

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

您可以检查以下代码，只需创建一个index.html并运行它。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table{
         border-spacing:10px;
         }
         td{
         padding:10px;
         }
      </style>
   </head>
   <body>
      <table cellspacing="0" cellpadding="0">
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
      </table>
   </body>
</html>

输出：