文章/答案/技术大牛

发布

社区首页 >问答首页 >双色表格单元格背景

问双色表格单元格背景
EN

Stack Overflow用户

提问于 2015-07-03 07:02:22

回答 3查看 10.7K关注 0票数 3

如何制作(只使用CSS，没有bg图像) html表格单元格(TD标签)具有红色的左半背景和绿色的右半背景。我不想要两个单元格，只需要一个由CSS定义的具有两种颜色背景的td单元格。

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-07-03 07:17:25

我使用了CSS渐变的概念。这里，第一种颜色从0开始，以50%结束，而第二种颜色从51%开始，以100%结束。因此，可以将比率分配给每种颜色。

td {
  background: linear-gradient(to right, tomato 50%, lightgray 51%);
}

<table>
  <tr>
    <td>
      Two Color Background
    </td>
  </tr>
</table>

票数 10

Stack Overflow用户

发布于 2015-07-03 07:07:23

这就是了：

td.halfnhalf {
  position: relative;
  background: green;
}
td.halfnhalf > span{
   position:relative;
}

td.halfnhalf:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 50%;
  bottom: 0;
  background: red;
}

<table>
  <tr>
    <td class="halfnhalf"><span>Testing</span></td>
  </tr>
</table>

如果您需要进一步的演示，请让我知道，我将设置一个jsfiddle。

票数 1

Stack Overflow用户

发布于 2015-07-03 07:07:31

我建议您使用带有边框的技巧或其他带有这里描述的伪元素的技巧：fill div with 2 colors?

或者更简单:只需在该TD中使用不同的背景色创建两个div。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31195985

复制

相似问题

问双色表格单元格背景
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问双色表格单元格背景EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问双色表格单元格背景
EN