CODEWITHSUNDEEP
htmlcss
flash
flash

Reputation: 6810

How to color columns in a Html table with spanning tds

I want to keep column background colors even if there are some spanning tdelements 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?

Upvotes: 0

Views: 81

Answers (2)

converset jordan
converset jordan

Reputation: 56

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

Upvotes: 1

Eren Akkus
Eren Akkus

Reputation: 471

Maybe it helps you.

css

.table td, .table th{width:33.334% !important;}
.col3{position:relative; width:calc(300% + 8px*4);}

html

<td>
   <div class="centered green col3">333</div>
</td>

http://www.bootply.com/dG4mHK0WW9

Upvotes: 1

Related Questions