关于html：在CSS中设置cellpadding和cellspacing？


Set cellpadding and cellspacing in CSS?

在HTML表中，可以这样设置cellpadding和cellspacing：

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

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

相关讨论

基础

为了控制CSS中的"cellpadding"，只需在表格单元格上使用padding。例如，对于10px的"手机添加"：

1
2
3
td {
    padding: 10px;
}

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

1
2
3
4
table {
    border-spacing: 10px;
    border-collapse: separate;
}

这个属性甚至允许单独的水平和垂直间距，这是您不能用旧的"cellspacing"来做的。

IE中的问题<=7

除了通过Internet Explorer 7向上浏览Internet Explorer外，这几乎适用于所有流行的浏览器，因为在那里您几乎不走运。我之所以说"几乎"，是因为这些浏览器仍然支持合并相邻表单元格边界的border-collapse属性。如果您试图消除单元格间距(即cellspacing="0")，那么border-collapse:collapse应该具有相同的效果：表单元格之间没有空格。不过，这种支持有问题，因为它不会覆盖table元素上现有的cellspacinghtml属性。

简而言之：对于非Internet Explorer 5-7浏览器，border-spacing可以处理您的问题。对于Internet Explorer，如果您的情况刚好正确(您需要0个单元格间距，但您的表尚未定义)，则可以使用border-collapse:collapse。

1
2
3
4
table {
    border-spacing: 0;
    border-collapse: collapse;
}

注意：有关可以应用于表和哪些浏览器的CSS属性的详细概述，请参见这个奇妙的QuirksMode页面。

相关讨论

违约

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

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

&Enter image description here

细胞填充

设置单元格内容与单元格壁之间的间距

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

&Enter image description here号

细胞间距

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

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

&Enter image description here号

两个

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

&Enter image description here号

两个(特别)

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

&Enter image description here号

Note: If there is border-spacing set, it indicates border-collapse property of the table is separate.

你自己试试！

在这里，您可以找到实现这一点的旧HTML方法。

相关讨论

1
2
3
4
5
6
7
8
9
table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}
相关讨论

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

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

相关讨论

此黑客适用于Internet Explorer 6及更高版本、Google Chrome、Firefox和Opera：

1
2
3
4
5
6
7
8
9
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中，您可以传递比预期更多的参数，并且将对所有参数进行评估。

相关讨论

对于那些想要非零的CellSpacing值的用户，下面的CSS对我很有用，但我只能在Firefox中测试它。

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

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

这个问题的简单解决方案是：

1
2
3
4
5
6
7
8
9
10
table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

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

用DIV包装单元格的内容，您可以做任何您想做的事情，但您必须将每个单元格包装在一列中以获得统一的效果。例如，要扩大左右页边距：

那么CSS将是，

1
2
3
4
5
6
div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}
1
2
3
4
5
6
7
<table border="0">
  <tr>
    <td class="tight">
      My content
    </td>
  </tr>
</table>

是的，这很麻烦。是的，它适用于Internet Explorer。事实上，我只在Internet Explorer中测试过这个，因为这是我们在工作中可以使用的全部功能。

相关讨论

只需使用border-collapse: collapse作为桌子，padding作为th或td。

此样式用于表格的完全重置-单元格添加、单元格间距和边框。

我在reset.css文件中使用了这种样式：

1
2
3
4
5
6
7
8
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的fannying，您最好使用cellpadding="0"cellspacing="0"，因为它们没有被否决…

显然，其他任何人认为

的利润率没有这样做。

相关讨论

1
2
3
4
5
6
7
table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

只需将CSS填充规则与表数据一起使用：

1
2
3
td {
    padding: 20px;
}

对于边框间距：

1
2
3
4
table {
    border-spacing: 1px;
    border-collapse: collapse;
}

但是，由于Box模型的不同实现，它可能会在旧版本的浏览器(如Internet Explorer)中产生问题。

我从W3C分类中了解到，

s仅用于显示数据。

基于这一点，我发现创建一个具有背景和所有背景的，并使用position: absolute;和background: transparent;在其上浮动数据的表要容易得多。

它适用于Chrome、Internet Explorer(6及更高版本)和Mozilla Firefox(2及更高版本)。

页边距用于(或以任何方式)在容器元素之间创建间隔符，如

、和

，而不是

、

、或。将其用于容器元素以外的任何其他元素都将使您忙于调整网站以备将来的浏览器更新。

相关讨论

CSS：

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

试试这个：

1
2
3
4
5
6
7
table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

或者试试这个：

1
2
3
4
5
6
table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

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

1
2
3
4
5
6
7
8
9
10
11
table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>

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

</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属性。但是，为了工作边框间距，边框折叠属性的值必须是单独的，这是默认值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>

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

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

在边境崩溃后我用了!important，就像

1
border-collapse: collapse !important;

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

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
<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可由css中的padding给出，cell-spacing可由table中的border-spacing设置。

1
2
3
4
5
6
table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

小提琴。

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

如果margin不起作用，试着把tr的display设为block，保证金就会起作用。

对于表格，在HTML5中cellspacing和cellpadding已经过时。

现在，对于单元格间距，必须使用边框间距。对于手机添加，你必须使用边界折叠。

确保你的HTML5代码中没有使用这个。始终尝试在CSS 3文件中使用这些值。

1
2
3
4
5
6
7
8
table {
    border-spacing: 4px;
    color: #000;
    background: #ccc;
}
td {
    padding-left: 4px;
}

在HTML表中，可以这样设置cellpadding和cellspacing：

对于单元格填充：

只需调用简单的td/thcell padding。

例子：

1
2
3
4
5
6
7
8
9
10
/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>

1
2
3
4
5
6
7
8
table {
    border-collapse: collapse;
}

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

用于单元格间距

只需调用简单的tableborder-spacing。

例子：

1
2
3
4
5
6
7
8
9
/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>

1
2
3
4
5
6
7
8
9
/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

更多的表格样式通过CSS源链接这里你得到更多的表格样式通过CSS。

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

1
2
3
4
5
6
7
8
table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

相关讨论

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

1
2
3
4
5
<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>
相关讨论