title: Make <td> with colspan=2 have 2-column background, another color in each column
body: <p>is it possible to make <code>&lt;td colspan="2"&gt;</code> element have 2-column background? I mean that <code>&lt;td&gt;</code> has 100% width and the background would be red for 50% of width and blue for the rest 50%:</p>
  
  <p><img src="https://i.stack.imgur.com/bcVbG.jpg" alt="background preview"></p>
  
  <p>The reason I need this is because of my html markup:</p>
  
  <pre><code>&lt;table&gt;
   &lt;tr&gt;
    &lt;td&gt;One column text&lt;/td&gt;&lt;td&gt;One column text&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;One column text&lt;/td&gt;&lt;td&gt;One column text&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td colspan="2"&gt;This text must flow through the whole table width (through 2 columns width)&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;One column text&lt;/td&gt;&lt;td&gt;One column text&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I think that I can use image as a background but I would prefer some clean HTML/CSS solution...</p>
  
  <p>In addition I can't use gradient background because IE cant show straight line between two colors, it can make only gradient from one color to another and this gradient needs 4 colors</p>