Html 在CSS中设置单元格填充和单元格间距？

在HTML表格中，

cellpadding

和

cellspacing

可以如下设置：

---

使用CSS如何实现同样的效果？

另外，如果您想要

cellspacting=“0”

，请不要忘记在

表格的样式表中添加
边框折叠：折叠。
设置表格单元格的边距就我所知实际上没有任何效果。
单元格间距
的真正CSS等价物是
边框间距
——但它在InternetExplorer中不起作用

您可以使用
border collapse:collapse
可靠地将单元格间距设置为0，但对于任何其他值，我认为唯一的跨浏览器方法是继续使用
cellspacing
属性。
表
{
边框折叠：折叠；/*“单元格间距”等效值*/
}
表td，表th
{
填充：0；/*“cellpadding”等效项*/
}
TBH。对于所有的CSS，你最好使用
cellpadding=“0”
cellspacing=“0”
，因为它们没有被弃用

其他建议在
上添加边距的人显然没有尝试过这一点。
Basics

要控制CSS中的“单元格填充”，只需在表格单元格上使用
padding
。例如，对于10px的“细胞填充”：

td{
填充：10px；
}

对于“cellspacing”，您可以将
边框间距
CSS属性应用于表。例如，对于10px的“单元间距”：

表{
边界间距：10px；
边界塌陷：分离；
}

该属性甚至允许单独的水平和垂直间距，这是老式“cellspacing”无法做到的

IE中的问题≤  7

这将适用于几乎所有流行的浏览器，但Internet Explorer 7除外，在Internet Explorer 7中，您几乎不走运。我之所以说“几乎”，是因为这些浏览器仍然支持
border collapse
属性，该属性合并相邻表格单元格的边框。如果试图消除单元格间距（即，
cellspacting=“0”
），则
边框折叠：折叠应具有相同的效果：表格单元格之间没有空格。不过，这种支持存在缺陷，因为它不会覆盖table元素上现有的
cellspacting
HTML属性

简言之：对于非Internet Explorer 5-7浏览器，
边框间距
处理您的问题。对于Internet Explorer，如果您的情况正好（您想要0个单元格间距，而您的表尚未定义它），则可以使用
边框折叠：折叠

表{
边界间距：0；
边界塌陷：塌陷；
}

注意：对于可以应用于表和浏览器的CSS属性的详细概述，请参见此。
对于那些想要非零cellspacing值的人，下面的CSS对我很有用，但我只能在Firefox中进行测试

有关兼容性的详细信息，请参阅链接。它似乎不适用于较旧的InternetExplorer版本

表格{
边界塌陷：分离；
边界间距：2px；
}
此黑客适用于InternetExplorer6及更高版本、Firefox和：

表格{
边界塌陷：分离；
边框间距：10px；/*单元格间距*/
*边框折叠：表达式（'separate'，cellSpacing='10px'）；
}
表td，表th{
填充：10px；/*单元填充*/
}

*
声明适用于InternetExplorer 6和7，其他浏览器将正确地忽略它

expression（'separate'，cellSpacing='10px'）
返回
'separate'
，但这两条语句都会运行，因为在JavaScript中，您可以传递比预期更多的参数，并且将对所有参数进行计算。
此问题的简单解决方案是：

表格
{
边框：1px实心#000000；
边界塌陷：塌陷；
边界间距：0px；
}
表td
{
填充：8px 8px；
}
默认值
浏览器的默认行为相当于：

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


细胞填充
设置单元格内容和单元格壁之间的空间量

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


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

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


二者都

两者（特别）

注意：如果设置了
边框间距
，则表示表的
边框折叠
属性为
单独


您可以找到实现这一点的旧HTML方法。
用div包装单元格的内容，您可以做任何您想做的事情，但是您必须将每个单元格包装在一列中才能获得统一的效果。例如，要获得更宽的左右边距，请执行以下操作：

所以CSS将会是


div.cellwidener{
利润率：0px 15px 0px 15px；
}
td紧{
填充：0px；
}

我的内容
根据我对W3C分类的理解，
s仅用于显示数据

基于此，我发现创建一个带有背景的
，并使用
position:absolute创建一个数据浮动的表要容易得多和
背景：透明

它适用于Chrome、InternetExplorer（6及更高版本）和Mozilla Firefox（2及更高版本）

边距用于（或无论如何）在容器元素之间创建分隔符，如
、
和
，而不是
、
或
。将其用于容器元素以外的任何内容都会让您忙于调整网站，以备将来的浏览器更新。
我使用了
！重要信息
在边框塌陷后，如

边框折叠：折叠！重要的；

在IE7中它对我有效。它似乎覆盖了cellspacing属性。
请尝试以下操作：

表格{
边界塌陷：分离；
边界间距：10px；
}
表t
table {border-spacing: 2px;}
td    {padding: 6px;}

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

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

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

td { 
    padding: 20px;
}

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

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

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

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

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

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

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

table {border-collapse: collapse}
table th, table td {padding: 0}