在CSS中设置cellpadding和cellspacing？
在HTML表格中， cellpadding和cellspacing可以像这样设置：
<table cellspacing="1" cellpadding="1">
怎样才能用CSS来完成呢？
基本
为了控制CSS中的“cellpadding”，你可以简单地在表格单元格中使用padding 。 例如，对于10px的“cellpadding”：
td { padding: 10px; }
对于“cellspacing”，可以将border-spacing CSS属性应用于表格。 例如，对于10px的“cellspacing”：
table { border-spacing: 10px; border-collapse: separate; }
这个属性甚至会允许单独的水平和垂直间距，这是老式“细胞间隔”所不能做到的。
IE中的问题<= 7
这几乎可以在几乎所有stream行的浏览器上运行，除了IE浏览器，Internet Explorer 7，你几乎不走运。 我说“差不多”，因为这些浏览器仍然支持border-collapse合并属性，合并相邻表格单元的边界。 如果您试图消除单元格间距（即cellspacing="0" ），那么border-collapse:collapse应该具有相同的效果：表格单元格之间没有空格。 但是，这种支持是错误的，因为它不会覆盖表元素上现有的cellspacing HTML属性。
简而言之：对于非Internet Explorer 5-7浏览器， border-spacing处理您。 对于Internet Explorer，如果您的情况恰到好处（您希望0 cellspacing并且您的表没有已经定义它），您可以使用border-collapse:collapse 。
table { border-spacing: 0; border-collapse: collapse; }
注意：要了解可以应用于表格和哪些浏览器的CSS属性，请参阅这个奇妙的Quirksmode页面 。
默认
浏览器的默认行为等同于：
table {border-collapse: collapse;} td {padding: 0px;}
CELLPADDING
设置单元格和单元格墙的内容之间的空间量
table {border-collapse: collapse;} td {padding: 6px;}
CELLSPACING
控制表格单元格之间的空间
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。
自己试试吧！
在这里你可以find实现这一点的旧的HTML方式。
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 ：
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中testing它。 请参阅别处发布的Quirksmode链接以获取兼容性详细信息。 似乎它可能不适用于较旧的Internet Explorer版本。
table { border-collapse: separate; border-spacing: 2px; }
这个问题的简单解决scheme是：
table { border: 1px solid #000000; border-collapse: collapse; border-spacing: 0px; } table td { padding: 8px 8px; }
另外，如果你想要cellspacing="0" ，不要忘了在你的table的样式表中添加border-collapse: collapse 。
用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>
只需使用border-collapse: collapse表格， padding th或td
TBH。 对于所有使用CSS的人来说，不妨使用cellpadding="0" cellspacing="0"因为它们不被弃用。
其他任何人提出的利润显然还没有尝试过。
这种风格是完全重置表 – 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*/ }
table th,td { padding: 8px 2px; } table { border-collapse: separate; border-spacing: 2px; }
从我从W3C分类中了解到的是， <table>仅用于显示数据。
基于这一点，我发现用背景创build一个<div>更容易，并且有一个数据表使用position: absolute; 和background: transparent; …
它适用于Chrome，IE（6及更高版本）和Mozilla（2及更高版本）。
页边距用于（或者意味着）在容器元素之间创build一个间隔，如<table> ， <div>和<form> ，而不是<tr> ， <td> ， <span>或<input> 。 将它用于除了容器元素以外的其他任何东西都会使您忙于调整您的网站，以便将来浏览器更新
只需使用表格数据的CSS填充规则：
td { padding: 20px; }
而对于边界间距：
table { border-spacing: 1px; border-collapse: collapse; }
但是，由于box模型的diff实现，它可能会在较旧版本的浏览器（如Internet Explorer）中产生问题。
CSS：
selector{ padding:0 0 10px 0; // Top left bottom right }
尝试这个：
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中适用于我。 它似乎重写了cellspacing属性。
<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可以通过为表格设置border-spacing来设置。
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不起作用，尝试设置tr display block ，然后保证金将工作。
对于表格cellspacing和cellpadding在HTML 5中已经过时。现在对于cellpacing，您必须使用border-spacing，而对于cellpadding，您必须使用border-collapse。
并确保你不要在你的HTML5代码中使用它。 总是尝试在CSS-3文件中使用这些值。
table{border-spacing:4px; color: #000; background:#ccc; } td{padding-left:4px;}
您可以使用CSS填充属性轻松设置表格单元格内的填充，这是生成与表格的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>
在HTML表格中， cellpadding和cellspacing可以像这样设置：
对于细胞填充 ：只需调用简单的td/th细胞padding
EX：
/******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>
你可以在CSS中使用border-spacing和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>
如何直接添加样式到表本身？ 这不是在你的CSS中使用table ，如果你的页面有多个表格，这是一个坏的方法：
<table style="border-collapse: separate;border-spacing: 2px;"> <tr> <td style="padding: 4px 4px;">Some Text</td> </tr> </table>
