html表格两种颜色,html – 表格细胞两个颜色背景对角线

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

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

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,#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,#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;

}

Two Color Background

Two Color Background

Two Color Background

Two Color Background

Two Color Background

Two Color Background

Two Color Background

Two Color Background

Two Color Background