title: Split td in two
body: <p>I'm trying to split a TD (table cell) to look as if it were two cells. The problem is that when the cell grows in Height, I cannot make the two divs inside to occupy all the available height. As these cells can grow dynamically I cannot set a fixed height either (that could solve the issue).</p>
  
  <p><strong>Here's my code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=utf-8 /&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;!--[if IE]&gt;
    &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  &lt;style&gt;
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; }
    td { border: 1px solid black; width: 50px; text-align: center; margin:0; padding:0 }
    #span1 { background-color: #DDD; width: 25px; float: right; }
    #span2 { background-color: #EEE; width: 24px; float: left; }
    .t { border-top: 1px solid black; }
    .r { border-right: 1px solid black; height: 100%; }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;3&lt;div&gt;&lt;div id="span1" class="t"&gt;1&lt;/div&gt;&lt;div id="span2" class="t r"&gt;1&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;&lt;div id="span1"&gt;3&lt;/div&gt;&lt;div id="span2" class="r"&gt;3&lt;/div&gt;&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;&lt;td&gt;2 2 2 2 2 22 2 &lt;/td&gt;&lt;td&gt;&lt;div id="span1"&gt;3&lt;/div&gt;&lt;div id="span2" class="r"&gt;3&lt;/div&gt;&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;&lt;div id="span1"&gt;3&lt;/div&gt;&lt;div id="span2" class="r"&gt;3&lt;/div&gt;&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;1&lt;/td&gt;&lt;td&gt;2 2 2 2 2 2 2 2 &lt;/td&gt;&lt;td&gt;&lt;span style="line-height:2"&gt;&lt;div id="span1"&gt;3&lt;/div&gt;&lt;div id="span2" class="r"&gt;3&lt;/div&gt;&lt;/span&gt;&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>This is how it looks:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/HA3NV.png" alt="current table view"></p>
  
  <p>I don't want to see those white gaps in column 3.</p>
  
  <p>Any ideas how to solve this?
  I've been fightting with CSS for a while with no luck so far ...</p>
  
  <p>Thanks!.</p>