spanning tdsでHtmlテーブルの列の色を付ける方法

Question

テーブルにいくつかのスパニング用の要素があっても、列の背景色を維持したい。このイメージは、私が達成したいことを示しています。 td要素に関係なく、列は完全に色付けされている必要があります。あなたが見ることができるようにhttp://www.bootply.com/9rjGrpg37X

は、4列にまたがるtdもオレンジ色に着色されているが、代わりに、私は上のように、それはまた、緑と青の色にしたい：

I'veが現在持ったコードは次のようになります上記の画像。

これはhtml/cssでも可能ですか？

Answer 1

それは、このようなlinear-gradientの使用で可能です：

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%); 
    } 

しかし、それは応答しないのです。（あなたはあなたのコラム

Answer 2

多分あなたを助けます。

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