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

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

場合

を追加してみてください、助けにはならない：

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

はそれを微調整するために行の高さをピクセル単位で遊んで、動作するはずです。

Answer 2

AとSPANはブロック要素ではないため、幅と高さを持たないようにしてください。また、高さに100％の値を与えることは、すべてのブラウザで同じように解釈されません。
セルのコンテンツの背景色を変更したいように見えるので、Aタグの代わりに.availableと.bookedというクラスをTDに付けることをお勧めします。