CSS span height 100% inside table

I've got a table.

Inside the table I've got <a class="available">available</a>,

but it seems the height doesn't cover the whole table row.

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>&l开发者_如何学JAVAt;/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; }

image is attached:

A and SPAN are not block elements, therefore they shouldn't have width and height. Also, giving to height a value of 100% isn't interpretated the same way in all browsers.
As you seem to just want to change the background color of the content of the cell, I'd suggest you give the classes .available and .booked to the TD instead of the A tag.

if

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

doesn't help, try adding:

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

play around with the line-height pixels to tweak it, should work.