table增加td间距
时间: 2023-10-08 08:11:05 浏览: 106
HTML table 表格边框的实现思路
5星 · 资源好评率100%
要在表格中增加 `<td>` 元素之间的间距,可以使用 CSS 来实现。你可以给 `<td>` 元素设置 `padding` 属性来增加间距,或者使用 `border-spacing` 属性来增加单元格之间的间距。以下是两种方法的示例代码:
1. 使用 `padding` 属性:
```html
<style>
td {
padding: 10px; /* 设置间距大小,根据需要进行调整 */
}
</style>
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
```
2. 使用 `border-spacing` 属性:
```html
<style>
table {
border-collapse: separate; /* 设置表格边框分离 */
border-spacing: 10px; /* 设置单元格间距大小,根据需要进行调整 */
}
</style>
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
```
这两种方法都可以增加 `<td>` 元素之间的间距,你可以根据实际需求选择其中一种来使用。
阅读全文