谷歌、火狐tr、tr高度不支持小数,IE支持
若tr设置的高度小于它自己填充的高度,则设置的高度不起作用;
若tr设置的高度(小数)大于它自己填充的高度,最后应用的高度会四舍五入
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div#table {
height: 243px;
width: 500px;
background: red;
}
table {
height: 100%;
width: 100%;
background: #AFEEEE;
border-collapse: collapse;
border-spacing: 0;
text-align: center;
}
tbody tr {
height: calc(100% / 3);
}
thead tr {
height: 40px;
}
tbody tr:nth-child(2n) {
background: #e4dc90;
}
tbody tr:nth-child(2n+1) {
background: #D4ECA2;
}
</style>
</head>
<body>
<div id="table">
<table>
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>