如何使用跨越tds为Html表中的列着色

Question

即使表格中有一些跨越td元素，我也希望保留列背景颜色。此图片说明了我想要实现的目标。无论td元素如何，列都应该是完全着色的。

我目前的代码如下所示：http://www.bootply.com/9rjGrpg37X

正如您所看到的，跨越4列的td也是橙色的，但我想要将其颜色也变为绿色和蓝色，如上图所示。

这是否可以使用html / css？

Answer 1

也许它可以帮到你。

<强> 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

Answer 2

可以像这样使用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%);
    }

但它没有回应;（

您必须尝试查找列宽度的百分比