CSS 表格
关于表格的CSS属性不多。
empty-cells
如果在一个表格中有空单元格，可以使用empty-cells属性来指定是否显示空单元格的边框。
empty-cells 属性有3个值：
- show 显示单元格边框
- hidde 隐藏单元格边框
- inherit 如果一个表格嵌套在另一个表格中，单元格边框是否显示根据外部表格的规则
示例
|
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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单元格边框</title> <style> td { border: 1px solid #E3722E; padding: 15px; } table.one { empty-cells: show;} table.two { empty-cells: hide;} </style></head><body><h1>软件开发，成就梦想</h1><table class="one"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td></td> </tr></table><table class="two"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td></td> </tr></table></body></html> |
单元之间空隙
控制单元之间空隙有两个属性，一个收拢，一个是展开。
border-spacing 属性将单元之间的空隙增大，它两个两个值，单位是像素、EM、百分比。第一个值是左右两边的空隙增大，第二个值是上下两边的值增大。
border-collapse 有3个值：
- separate：默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。
- collapse：如果可能，边框会合并为一个单一的边框。会忽略border-spacing 和 empty-cells 属性。
- inherit：规定应该从父元素继承border-collapse属性的值。
示例
|
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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单元之间空隙</title> <style> td { border: 1px solid #E3722E; padding: 15px; color:#fff; } table.one { border-spacing:10px 4px; } table.two { border-collapse: collapse; } </style></head><body><h1>软件开发，成就梦想</h1><table class="one"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr></table><table class="two"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr></table></body></html> |
浙公网安备 33010602011771号