CODEWITHSUNDEEP
htmlbackgroundhtml-table
simPod
simPod

Reputation: 13466

Make <td> with colspan=2 have 2-column background, another color in each column

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%:

background preview

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

Upvotes: 4

Views: 3280

Answers (1)

Mr Lister
Mr Lister

Reputation: 46579

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.

Upvotes: 3

Related Questions