How to get span to take up the full height of the containing td

Question

I have a table, and in the left column I want to add an indicator for the row. I'm using a span to render the indicator, but I can't get the span to take up the full height:

<table>
    <tr>
        <td style="padding:0px;"><span style="height:100%; width:5px; background-color:pink;">&nbsp;</span></td>
        <td>Some content</td>
        <td>Some more content</td>
    </tr>
</table>

The table has a padding of 15px, so for the indicator col I remove the padding, and set the span to height:100%:

td {padding:15px;}
table {background-color: yellow;}

This fiddle shows it currently running - that pink bar needs to span the whole height of the containing td.

How do I do this? Note that I can't set the styling on the td instead of the span because that causes other issues with the rendering (it offsets the border-bottom of the th rows if I do that).

Answer 1

Should add overflow:auto to the span (and display:block of course)

<table>
   <tr>
      <td style="padding:0px;"><span style="height:100%; width:5px; background-color:pink;display:block;overflow:auto">&nbsp;</span></td>
      <td>Some content</td>
      <td>Some more content</td>
  </tr>
</table>

Answer 2

You don't need the <span> there. All you need is to set the right and left padding to 0 so your colored row indicator is only 5 pixels wide as u wanted and leave the top and bottom paddings 15 as in the other cells so the background color covers the whole height of cell/row.

HTML

  <table>
    <tr>
        <td class="rowindicator">&nbsp;</td>
        <td>Some content</td>
        <td>Some more content</td>
    </tr>
</table>

CSS

    table{background: yellow;}
    td{padding:15px;}
    .rowindicator{
         width:5px;                       
         padding-right:0px;  
         padding-left:0px;                       
         background-color:pink;
    }

Demo: http://jsfiddle.net/mNjsb/34/