关于表格的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
>
|
扫一扫
715
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
