title: Stretch a span across a td
body: <p>I think an image best describes this:  JS FIDDLE HERE: <a href="http://jsfiddle.net/fp2Ak/" rel="nofollow noreferrer">http://jsfiddle.net/fp2Ak/</a></p>
  
  <p><img src="https://i.stack.imgur.com/D9uQ1.png" alt="enter image description here"></p>
  
  <p>What I want to do, is for those lines to actually touch. Each one is a span with a number in. within a td. Note: some Tds contain multiple spans, for example, 218 and 222. (you can see tr with faint blue lines.)</p>
  
  <p>As you can see it does touch at one point, as this is the biggest element in the column (including header). But this is rarely the case. How would I stretch it to touch in ALL Cases.</p>
  
  <p>You can suggest using someting other than span, but please note that I do need more than one thing in a td, and hence cant be applied to the td.</p>
  
  <p>The CSS that governs most of this so far:</p>
  
  <pre><code>  table.Timetable td ,  table.Timetable th 
    {
        border-spacing: 0px;
        padding: 0px;
    }
  
    .bookingStart, .bookingMiddle, .bookingEnd
    {
        background-color: white;
        color: Black;
        border-top: 2px solid black;
          border-bottom: 2px solid black;
    }
    .bookingStart 
    {
        border-left: 2px solid black;
    }
      .bookingEnd
    {
        border-right: 2px solid black;
    }
  </code></pre>
  
  <p>Oh and preferabblly Id like to be able to pad the cells again, as the th clearly have been merged together.</p>
  
  <p>JSfiddle of it here: <a href="http://jsfiddle.net/fp2Ak/" rel="nofollow noreferrer">http://jsfiddle.net/fp2Ak/</a></p>