使用 css 在单元格之间添加空格(td)

我尝试在单元格之间添加一个空格表格，因为单元格的背景颜色是白色，而表格的背景颜色是蓝色，你很容易看到填充和边距不起作用(我把它应用到 td) ，它只会在单元格内部添加空格。

235125 次浏览
小开
最佳答案

You want border-spacing:

<table style="border-spacing: 10px;">

Or in a CSS block somewhere:

table {
border-spacing: 10px;
}

See quirksmode on border-spacing. Be aware that border-spacing does not work on IE7 and below.

小开

Consider using cellspacing and cellpadding attributes for table tag or border-spacing css property.

小开

cellspacing (distance between cells) parameter of the TABLE tag is precisely what you want. The disadvantage is it's one value, used both for x and y, you can't choose different spacing or padding vertically/horizontally. There is a CSS property too, but it's not widely supported.

小开 
table {
border-spacing: 10px;
}

This worked for me once I removed 

border-collapse: separate;

from my table tag.

小开

Mine is:

border-spacing: 10px;
border-collapse: separate;
小开

Suppose cellspcing / cellpadding / border-spacing property did not worked, you can use the code as follow.

<div class="form-group">
<table width="100%" cellspacing="2px" style="border-spacing: 10px;">
<tr>
<td width="47%">
<input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
</td>
<td width="5%"></td>
<td width="47%">
<input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
</td>
</tr>
</table>
</div>

I've tried and got succeed while seperate the button by using table-width and make an empty td as 2 or 1% it doesn't return more different.

小开

If you want separate values for sides and top-bottom.

<table style="border-spacing: 5px 10px;">

提交答案