Wonderjar's Blog

Table格子高度被其他格子撑大的留白

2018-06-27

Table格子高度被其他格子撑大后,上下产生留白,而且这种留白不是受padding的控制,就导致内容被竖直居中在中间
就像这里,橙色撑不满黄色,

如果确保让每个格子的内容都能撑满当前高度,有一个小技巧
设置tr height 1px, 然后td height 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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>222</td>
<td>
<div>
<div>222</div>
<div>222</div>
</div>
</td>
<td>
<div>
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</td>
<td>
<div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</td>
<td>
<div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</td>
</tr>
</table>
</body>
<style>
table tr {
height: 1px;
}
table tr td {
height: inherit;
background-color: yellow;
}
table tr td div {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
background: orange;
}
table tr td div div {
border: solid black 1px;
}

</style>
</html>

Tags: CSS