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% не интерпретируется одинаково во всех браузерах.
Поскольку вы, похоже, просто хотите изменить цвет фона содержимого ячейки, я бы посоветовал вам дать классы.доступен и зарезервирован для ТД вместо тега А.

Answer 2

, если

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

не помогает, попробуйте добавить:

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

поэкспериментируйте с пикселями высоты строки, чтобы настроить его, должно работать.