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

概述是否可以为表格单元格提供多种背景颜色,如下图所示？ Two color table cell background似乎做了我想要的东西,但它并不完全是对角线. 现有的答案都很好,这并不是试图以任何方式将它们放下.这是对它们的改进,如果您想要具有渐变的响应式设计,可以使用它们. 正如在其他两个答案中已经提到的(并在下面的片段中看到),如果td的高度或宽度发生变化,则应修改渐变的角度.当设计必须响应时 是否可以为表格单元格提供多种背景颜色,如下图所示？

Two color table cell background似乎做了我想要的东西,但它并不完全是对角线.

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

正如在其他两个答案中已经提到的(并在下面的片段中看到),如果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;}

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

总结

以上是内存溢出为你收集整理的html – 表格细胞两个颜色背景对角线全部内容，希望文章能够帮你解决html – 表格细胞两个颜色背景对角线所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。