html - 表格单元格两种颜色背景对 Angular 线

Question

是否可以像下图那样为表格单元格设置多种背景颜色？

Two color table cell background似乎在做我想要的事情，但它并不完全是对 Angular 线。

Answer 1

现有的两个答案都很好，这并不是要以任何方式贬低它们。这是对它们的改进，如果您想要带有渐变的响应式设计，可以使用它。

正如在其他两个答案中已经提到的(以及在下面的代码片段中看到的)，如果 td 的高度或宽度发生变化，则应修改渐变的 Angular 。当设计必须响应时，这是一个缺点，但在使用 to [side] [side] 渐变语法而不是 Angular 渐变时可以避免它。这种语法可以适应维度的任何变化。

td {
  background: linear-gradient(to top right, #167891 49.5%, #0D507A 50.5%);
  color: #fff;
}

里面的文字需要额外的定位才能让它看起来和问题中的一模一样。

tr:nth-child(3) td {
  background: linear-gradient(to top right, #167891 49.5%, #0D507A 50.5%);
  color: #fff;
}
tr:nth-child(1) td {
  background: linear-gradient(18deg, #167891 50%, #0D507A 51%);
  color: #fff;
}
tr:nth-child(2) td {
  background: linear-gradient(33deg, #167891 50%, #0D507A 51%);
  color: #fff;
}

/* Just for demo */

table {
  float: left;
}
table:nth-child(2) td {
  height: 50px;
}
table:nth-child(3) td {
  height: 100px;
}
table:nth-child(4) td {
  height: 150px;
}

<!-- prefix library included only to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

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