如何获得表格单元格间的填充，但不是整个表格的填充？

我想有一个填充表之间的每个单元，但不是围绕外边缘单元格，即不在表格本身周围。如何获得表格单元格间的填充，但不是整个表格的填充？

使用：

border-collapse : separate; 
border-spacing : 0.5em;

给我到处填充，同时使用：

border-collapse : collapse;

任何地方没有给出填充。

尝试另一种方法，我可以单独细胞水平之间使用td + td选择得到的填充。但是我不能使用tr + tr选择器，因为它看起来tr忽略了边距，填充和边框规则。

而且，当然，在普通td选择器上的填充适用于所有单元格，即使是外部单元格的外边缘。

这只适用于当代浏览器 - 对我来说没有IE 6或7非常感谢。而且我不会放松对IE 8的任何睡眠，尽管如果这能够奏效的话它会很好。

来源

2011-06-15 Lawrence Dol

但IE7或IE8？（即没有'：最后孩子'的答案？） – 2011-06-15 05:02:04

这不是一个完美的解决方案，因为它使用填充而不是边界间距。可能它会适用于你的问题。

HTML：

<table> 
    <tr> 
     <td>Data 1</td> 
     <td>Data 2</td> 
    </tr> 
    <tr> 
     <td>Data 3</td> 
     <td>Data 4</td> 
    </tr> 
</table>

而CSS：

table { 
    border: 1px red solid; 
    border-collapse: separate; 
} 

td { 
    background-color: green; 
    border: 1px black solid; 
    padding: 10px; 
} 

td:first-child { 
    padding-left: 0px; 
} 

td:last-child { 
    padding-right: 0px; 
} 

tr:first-child td { 
    padding-top: 0px; 
} 

tr:last-child td { 
    padding-bottom: 0px; 
}

产地：

enter image description here

也on jsFiddle。

来源

2011-06-15 05:17:45

其实，看起来*精确*就像我正在寻找的东西 - 我没有意识到有一个'最后孩子'伪类。 – 2011-06-15 05:19:42

是的，但我警告过：[它只能工作> IE8。]（http://reference.sitepoint.com/css/pseudoclass-lastchild）:( – 2011-06-15 05:20:55

不错，但这不适用于复杂表格中的colspan和rowspan 。） – user706420 2014-07-10 19:20:20

-1

你可以随意使用标记来将.first添加到一行中的第一个单元格，而最后一个是.last，我想也是第一个和最后一个行，然后适当地填充？

来源

2011-06-15 05:16:22

不现实 - 这将是一个重大的努力和维修的噩梦。 – 2011-06-15 05:17:59

如何获得表格单元格间的填充，但不是整个表格的填充？

回答

相关问题