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

标签 html css

即使表格中有一些跨越 td 元素,我也想保留列背景颜色。这张图片说明了我想要实现的目标。 enter image description here无论 td 元素如何,列都应该完全着色。

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

如您所见,跨越 4 列的 td 也是橙色的,但我想像上图一样将其着色为绿色和蓝色。

这甚至可以用 html/css 实现吗?

最佳答案

可以像这样使用 linear-gradient :

html:

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

样式:

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

但它没有响应;(

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

关于html - 如何使用跨越 tds 为 Html 表中的列着色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40257353/

相关文章:

css - JSF CSS 优先顺序

html - 在一个元素上使用两个动画,CSS

javascript - 为复杂表构建排序器和过滤器

javascript - 在 html 文档中突出显示不同字符串的最快方法是什么?

javascript - jsFiddler.NET 中的文本/HTML 编辑器

javascript - 在运行时更改 Cluetip 背景图像

css - 将 CSS 分色三 Angular 形定位并调整大小到所需的位置和比例

jquery - Bootstrap 导航栏似乎比实际内容长

javascript - 如何使用 jquery 获取所选引导下拉项的值?

css - 在 CSS 中设置 Ant 设计图标的粗细