title: CSS span height 100% inside table
body: <p>I've got a table.<br>
  Inside the table I've got <code>&lt;a class="available"&gt;available&lt;/a&gt;</code>,<br>
  but it seems the height doesn't cover the whole table row.  </p>
  
  <p>html:</p>
  
  <pre><code>&lt;table with="100%" class="list_table"&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;a class="available"&gt;Available&lt;/a&gt;&lt;/td&gt;
  &lt;td&gt;&lt;a class="booked"&gt;&lt;span&gt;Nose to mouth&lt;/span&gt;&lt;span&gt;Frown Lines&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>css: </p>
  
  <pre><code>.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; }
  </code></pre>
  
  <p>image is attached:</p>
  
  <p><img src="https://i.stack.imgur.com/bQD1X.png" alt="alt text"></p>