如何在 CSS 中设置表格 cellpadding 和 cellspacing
主题：HTML / CSS上一页|下一页
答案：使用 CSS padding & border-spacing属性
正如我们所知，表格的 cellpadding 和 cellspacing 属性在 HTML5 中被删除。
但是，您仍然可以使用 CSS padding 属性轻松设置表格单元格内的填充。 这是产生与表格的 cellpadding 属性相同效果的有效方法。
以下示例中的样式规则将向表格单元格添加 10 像素的填充。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellpadding in CSS</title>
<style>
table, th, td{
border: 1px solid #666;
}
table th, table td{
padding: 10px; /* Apply cell padding */
}
</style>
</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>同样，您可以使用 CSS border-spacing 属性来应用相邻表格单元格边框之间的间距，例如 cellspacing 属性。 但是，为了使 border-spacing 起作用，border-collapse 属性的值必须是 separate，这是默认值。
让我们看一下以下示例，以了解其基本工作原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Cellspacing in CSS</title>
<style>
table{
border-collapse: separate;
border-spacing: 10px; /* 应用单元格间距 */
}
table, th, td{
border: 1px solid #666;
}
table th, table td{
padding: 5px; /* 应用单元格填充 */
}
</style>
</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>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements