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

在 HTML 表中，可以像这样设置和：cellpaddingcellspacing

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

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

分割线

网友回答：

违约

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

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

Enter image description here

单元格填充

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

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

Enter image description here

单元格间距

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

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

Enter image description here

双

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

Enter image description here

两者（特殊）

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

Enter image description here

注意：如果有设置，则表示表的属性为。border-spacingborder-collapseseparate

自己试试吧！

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

分割线

网友回答：

基本

要控制CSS中的“单元格填充”，您可以简单地在表格单元格上使用。例如，对于 10px 的“单元格填充”：padding

td { 
    padding: 10px;
}

对于“单元格间距”，您可以将 CSS 属性应用于表格。例如，对于 10px 的“单元格间距”：border-spacing

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

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

IE ≤ 7 中的问题

这几乎适用于所有流行的浏览器，除了Internet Explorer到Internet Explorer 7，在那里你几乎不走运。我说“几乎”是因为这些浏览器仍然支持该属性，该属性合并了相邻表格单元格的边框。如果您尝试消除单元格间距（即），那么应该具有相同的效果：表格单元格之间没有空格。但是，此支持存在错误，因为它不会覆盖表元素上的现有 HTML 属性。border-collapsecellspacing="0"border-collapse:collapsecellspacing

简而言之：对于非IE浏览器5-7浏览器，可以处理您。对于 Internet Explorer，如果您的情况恰到好处（您想要 0 单元格间距，而您的表尚未定义它），则可以使用 .border-spacingborder-collapse:collapse

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

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

分割线

网友回答：

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

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

模板简介：该模板名称为【在 CSS 中设置单元格填充和单元格间距？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。