試一試
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 表格模組