flash flash - 1 month ago 8
CSS Question

How to color columns in a Html table with spanning tds

I want to keep column background colors even if there are some spanning

td
elements in the table. This image illustrates what I want to achieve.enter image description here The columns should be completely colored, regardless of the
td
elements.

The code that I´ve got currently looks like this: http://www.bootply.com/9rjGrpg37X

As you can see, the
td
which spans 4 columns is also colored orange but instead I want to color it also green and blue like on the image above.

Is this even possible with html/css?

Answer

It is possible with the use of linear-gradient like this :

html :

    <tr>
        <td class="try" colspan="3">
            <div class="centered green">333</div>
        </td>
    </tr>

css :

    .try{
        background :linear-gradient(90deg, #FF9950 43.34%, #92D050 43.34%, #92D050 71.66%, #9ED3D7 71.66%);
    }

But it's not responsive ;(

You must try to find the % of the width of your column