提问



在HTML表格中,cellpaddingcellspacing可以像这样设置:


<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


这将适用于几乎所有流行的浏览器,除了互联网浏览器通过Internet浏览器  7,你几乎没有运气。我说差不多因为这些浏览器仍然支持border-collapse属性,它合并相邻表格单元格的边界。如果您正在尝试消除单元格间距(即cellspacing="0"),则border-collapse:collapse应该具有相同的效果:表格单元格之间没有空格。但是,这种支持是错误的,因为它不会覆盖表元素上的现有cellspacing HTML属性。


简而言之:对于非Internet浏览器5-7浏览器,border-spacing会处理您。对于Internet Explorer,如果你的情况恰到好处(你想要0个单元间距并且你的表没有定义它),你可以使用border-collapse:collapse


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


注意:有关可以应用于表和哪些浏览器的CSS属性的概述,请参阅这个奇妙的Quirksmode页面。[92]

其它参考1


默认



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


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



亲自尝试![93]


在这里你可以找到实现这一目标的旧html方式。[94]

其它参考2


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

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

其它参考3


据我所知,设置表格单元格的边距并没有任何影响。cellspacing的真正CSS等价物是border-spacing - 但它在互联网资源管理器中不起作用。


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

其它参考4


此黑客适用于Internet  Explorer  6及更高版本,Google Chrome,Firefox和Opera:[95] [96]


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中你可以传递比预期更多的参数,并且所有参数都将被评估。

其它参考5


对于那些想要非零单元间距值的人,以下CSS对我有用,但我只能在Firefox中测试它。请参阅其他地方发布的Quirksmode链接以获取兼容性详细信息。似乎它可能不适用于旧的Internet 资源管理器的版本。[97]


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

其它参考6


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


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

其它参考7


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

其它参考8


用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表示thtd

其它参考9


TBH。对于所有使用CSS的人来说,您可以使用cellpadding="0" cellspacing="0"因为它们不被弃用...


其他任何人建议<td>的利润显然没有尝试过。

其它参考10


此样式适用于表格完全重置 - 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*/
}

其它参考11


根据我对W3C分类的理解,<table> s用于仅显示数据。


基于此,我发现使用position: absolute;background: transparent;创建具有背景和所有这些的<div>并且使用浮动在其上的数据表更容易...


它适用于Chrome,IE(6及更高版本)和Mozilla(2及更高版本)。


使用边距(或无论如何)来在容器元素之间创建间隔,如<table><div><form>,而不是<tr><td><span><input>。将其用于容器元素以外的任何其他内容将使您忙于调整您的网站以便将来的浏览器更新。

其它参考12


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

其它参考13


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


td { 
    padding: 20px;
}


对于边界间距:


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


但是,由于框模型的差异化实施,它可能会在旧版浏览器(例如Internet 资源管理器)中产生问题。

其它参考14


CSS:


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

其它参考15


尝试这个:


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


或试试这个:


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

其它参考16


我在边界崩溃之后使用了!important


border-collapse: collapse !important;


它在IE7中适用于我。它似乎覆盖了cellspacing属性。

其它参考17


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


小提琴。[99]

其它参考18


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


如果margin不起作用,尝试将trdisplay设置为block,然后保证金将起作用。

其它参考19


对于表格cellspacing和cellpadding在HTML 5中已经过时。
现在对于cellspacing,你必须使用border-spacing
对于cellpadding,你必须使用border-collapse。


并确保您不要在HTML5代码中使用它。总是尝试在CSS-3文件中使用这些值。

其它参考20


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

其它参考21


您可以使用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表格中,cellpaddingcellspacing可以像这样设置:


对于 Cell-Padding :
只需调用简单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>



您可以使用border-spacingpadding在CSS中执行类似的操作:




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,而是如果页面上有多个表,则为 BAD 方法:


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