border-spacing

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

border-spacing CSS property sets the distance between the borders of adjacent <table> cells. This property applies only when border-collapse is separate .

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

注意： border-spacing property is equivalent to the deprecated cellspacing <table> attribute, except that it has an optional second value that can be used to set different horizontal and vertical spacing.

句法

/* <length> */
border-spacing: 2px;
/* horizontal <length> | vertical <length> */
border-spacing: 1cm 2em;
/* Global values */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;

border-spacing property may be specified as either one or two values.

When one <length> value is specified, it defines both the horizontal and vertical spacings between cells.
When two <length> values are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns ), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows ).

值

<length>

形式定义

初始值	`0`
适用于	`table` and `inline-table` elements
继承	yes
计算值	two absolute lengths
动画类型	discrete

形式句法

<length> <length>?

范例

Spacing and padding table cells

This example applies a spacing of .5em vertically and 1em horizontally between a table's cells. Note how, along its outside edges, the table's padding values are added to its border-spacing values.

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

table {
  border-spacing: 1em .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;
}

结果

规范

规范	状态	注释
CSS Level 2 (Revision 1) The definition of 'border-spacing' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`border-spacing`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 8	Opera 完整支持 4	Safari 完整支持 1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 14	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0

图例

完整支持

另请参阅

border-collapse , border-style
border-spacing property alters the appearance of the <table> HTML element.

元数据

最后修改： Aug 14, 2020

CSS
CSS 参考
CSS Table
特性
1. border-collapse
2. border-spacing
3. caption-side
4. empty-cells
5. table-layout
6. vertical-align

在此页

句法

值