如何使用 CSS 设置表格单元格填充和单元格间距

2024-07-07 22:26| 来源: 网络整理| 查看: 265

如何在 CSS 中设置表格 cellpadding 和 cellspacing

主题:HTML / CSS

答案:使用 CSS padding & border-spacing属性

正如我们所知，表格的 cellpadding 和 cellspacing 属性在 HTML5 中被删除。

但是，您仍然可以使用 CSS padding 属性轻松设置表格单元格内的填充。这是产生与表格的 cellpadding 属性相同效果的有效方法。

以下示例中的样式规则将向表格单元格添加 10 像素的填充。

示例在 CSS 中设置 Cellpadding table, th, td{ border: 1px solid #666; } table th, table td{ padding: 10px; /* 应用单元格填充 */ } Row First Name Last Name Email 1 Clark Kent [email protected] 2 Peter Parker [email protected] 3 John Rambo [email protected]

同样，您可以使用 CSS border-spacing 属性来应用相邻表格单元格边框之间的间距，例如 cellspacing 属性。但是，为了使 border-spacing 起作用，border-collapse 属性的值必须是 separate，这是默认值。

让我们看一下以下示例，以了解其基本工作原理:

示例在 CSS 中设置单元格间距 table{ border-collapse: separate; border-spacing: 10px; /* 应用单元格间距 */ } table, th, td{ border: 1px solid #666; } table th, table td{ padding: 5px; /* 应用单元格填充 */ } Row First Name Last Name Email 1 Clark Kent [email protected] 2 Peter Parker [email protected] 3 John Rambo [email protected] FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答:

如何使用 CSS 突出显示备用表格行如何使用 CSS 从表格中删除单元格间距如何使用 CSS 去除图像下方的空白

【本文地址】

公司简介

联系我们