html – 表格细胞两个颜色背景对角线
发布时间:2020-12-14 18:27:00 所属栏目:资源 来源:网络整理
导读:是否可以为表格单元格提供多种背景颜色,如下图所示? Two color table cell background似乎做了我想要的东西,但它并不完全是对角线. 解决方法 现有的答案都很好,这并不是试图以任何方式将它们放下.这是对它们的改进,如果您想要具有渐变的响应式设计,可以使用
是否可以为表格单元格提供多种背景颜色,如下图所示?
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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |