试一试
border-spacing: 0;
border-spacing: 5px;
border-spacing: 5px 1rem;
<section class="default-example" id="default-example">
<table class="transition-all" id="example-element">
<tr>
<td>Cell 1.1</td>
<td>Cell 1.2</td>
</tr>
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td>
</tr>
<tr>
<td>Cell 3.1</td>
<td>Cell 3.2</td>
</tr>
</table>
</section>
table {
width: 15rem;
table-layout: fixed;
}
td {
border: 5px solid;
border-color: crimson dodgerblue;
padding: 0.75rem;
}
border-spacing 值也用于表格的外边缘，其中表格边框与第一/最后一列或行中的单元格之间的距离是相关的（水平或垂直）border-spacing 和表格上相关的（上、右、下或左）padding 的总和。
注意： border-spacing 属性等同于已废弃的 <table> 元素的 cellspacing 属性，只是 border-spacing 有一个可选的第二个值，可用于设置不同的水平和垂直间距。
语法
css
/* <length> */
border-spacing: 2px;
/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;
/* Global values */
border-spacing: inherit;
border-spacing: initial;
border-spacing: revert;
border-spacing: revert-layer;
border-spacing: unset;
border-spacing 属性可以指定为一个或两个值。
- 当指定一个
<length>值时，它定义了单元格之间的水平和垂直间距。 - 当指定两个
<length>值时，第一个值定义了单元格之间的水平间距（即，相邻列中单元格之间的空间），第二个值定义了单元格之间的垂直间距（即，相邻行中单元格之间的空间）。
值
<length>-
间距的固定值大小。
正式定义
正式语法
border-spacing =
<length>{1,2}
示例
间距和内边距表格单元格
此示例在表格单元格之间应用了垂直方向 .5em、水平方向 1em 的间距。请注意，在其外边缘，表格的 padding 值是如何添加到其 border-spacing 值中的。
HTML
html
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
CSS
css
table {
border-spacing: 1em 0.5em;
padding: 0 2em 1em 0;
border: 1px solid orange;
}
td {
width: 1.5em;
height: 1.5em;
background: #d2d2d2;
text-align: center;
vertical-align: middle;
}
结果
规范
| 规范 |
|---|
| 层叠样式表级别 2 # separated-borders |
浏览器兼容性
加载中…
另见
border-collapse,border-styleborder-spacing属性改变了<table>HTML 元素的显示。- CSS 表格模块