Question

is it possible to make <td colspan="2"> element have 2-column background? I mean that <td> has 100% width and the background would be red for 50% of width and blue for the rest 50%:

The reason I need this is because of my html markup:

<table>
 <tr>
  <td>One column text</td><td>One column text</td>
 </tr>
 <tr>
  <td>One column text</td><td>One column text</td>
 </tr>
 <tr>
  <td colspan="2">This text must flow through the whole table width (through 2 columns width)</td>
 </tr>
 <tr>
  <td>One column text</td><td>One column text</td>
 </tr>
</table>

I think that I can use image as a background but I would prefer some clean HTML/CSS solution…

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

Answer 1

Can you work with this as a base?
http://jsfiddle.net/MrLister/ggRHs/4/
I didn’t style the table, so you can see what happens better. But it doesn’t use colspan, so you can just color each individual table cell as you see fit.