Question

是否可以为表格单元格提供多种背景颜色，如下图所示？

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

Answer 1

现有的答案都很好，并不是试图以任何方式将它们放下。这是对它们的改进，如果你想要具有渐变的响应式设计，可以使用它。

正如在其他两个答案中已经提到的（并在下面的代码段中看到），如果td的高度或宽度发生变化，则应修改渐变角度。当设计必须响应时，这是一个缺点，但在使用to [side] [side]渐变语法而不是倾斜渐变时可以避免这种情况。此语法可以适应尺寸的任何变化。

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

里面的文字需要额外的定位才能使它看起来与问题完全一样。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要为线性渐变添加旋转度。请注意，这取决于td元素的高度。

＆＃13;

td {
  background: rgba(240, 105, 93, 1);
  background: linear-gradient(18deg, #167891 50%, #0D507A 51%);
  color: #fff;
  height: 50px;
}

＆＃13;

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

＆＃13;

独立于身高：

基于Harry的评论to top right会更好，因为它与高度无关。

＆＃13;

td {
  background: rgba(240, 105, 93, 1);
  background: linear-gradient(to top right, #167891 50%, #0D507A 51%);
  color: #fff;
  height: 50px;
}

＆＃13;

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

＆＃13;

Answer 3

与此JSFiddle一样，您只需设置像33deg这样的渐变角度，以匹配示例中的角落

＆＃13;

td {
    height:100px;
    background: -webkit-linear-gradient(33deg, lightblue 50%, navy 51%);
    background: linear-gradient(33deg, lightblue 50%, navy 51%);
    color:white;
}

＆＃13;

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

＆＃13;

表格细胞两个颜色背景对角线

3 个答案: