CSS跨越表内的100％高度

Question

我有一张桌子 在桌子内我有<a class="available">available</a>，
但似乎高度并没有覆盖整个桌子排。

HTML：

<table with="100%" class="list_table">
<tbody>
<tr>
<td><a class="available">Available</a></td>
<td><a class="booked"><span>Nose to mouth</span><span>Frown Lines</span></a></td>
</tr>
</tbody>
</table>

css：

.list_table thead th, .list_table tbody td { border:1px solid #D3D9CB;  font-size:12px; position:relative !important;}
.available { background:#98AEB3; display:block; height:100%;}
.booked { background:#F2AE30; }

附上图片：

Answer 1

A和SPAN不是块元素，因此它们不应具有宽度和高度。此外，在所有浏览器中，高度值100％并未以相同的方式解释 由于您似乎只想更改单元格内容的背景颜色，我建议您将类.available和.booked提供给TD而不是A标记。<​​/ p>

Answer 2

如果

.available { background:#98AEB3; display:block; height:100%;padding:0;margin:0;}

无效，请尝试添加：

.available { background:#98AEB3; display:block; height:100%;line-height:18px;}

使用行高像素来调整它，应该可以工作。