文字
分享

语法:

border-collapse:separate | collapse

默认值separate

适用于:table系元素

继承性:有

动画性:否

计算值:指定值

取值:

  • separate:边框独立

  • collapse:相邻边被合并

说明:

设置或检索表格的行和单元格的边是合并还是独立。
  • 只有当表格边框独立(即 <' border-collapse '> 属性等于separate时), <' border-spacing '> 和 <' empty-cells '> 才起作用。

  • 对应的脚本特性为borderCollapse

兼容性:

ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
Basic Support6.0+2.0+4.0+6.0+15.0+6.0+2.1+18.0+

示例:

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>border-collapse_CSS参考手册_web前端开发参考手册系列</title>

<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />

<style>

h1{font-size:16px;font-family:Arial;}

.separate{border-collapse:separate;}

.collapse{border-collapse:collapse;}

</style>

</head>

<body>

<h1>separate: 边框独立</h1>

<table border="1" class="separate">

<tbody>

    <tr>

        <td>独立边框</td>

        <td>独立边框</td>

        <td>独立边框</td>

    </tr>

    <tr>

        <td>独立边框</td>

        <td>独立边框</td>

        <td>独立边框</td>

    </tr>

</tbody>

</table>

 

<h1>collapse: 相邻边被合并</h1>

<table border="1" class="collapse">

<tbody>

    <tr>

        <td>合并边框</td>

        <td>合并边框</td>

        <td>合并边框</td>

    </tr>

    <tr>

        <td>合并边框</td>

        <td>合并边框</td>

        <td>合并边框</td>

    </tr>

</tbody>

</table>

</body>

</html>

            


运行实例 »

点击 "运行实例" 按钮查看在线实例

上一篇:table-layout下一篇:border-spacing