[英]How to apply different color to different rows in HTML using css [not to alternate rows , but any color to any row]
如图所示，我想将不同的颜色应用于不同的行和列，而不仅仅是交替的
检查以下示例。
class添加到所需的行并根据需要应用样式。nth-child选择器。 使用class
table { border-collapse: collapse; } td { border: 1px solid grey; padding: 10px 20px; } tr.yellow { background-color: yellow; } tr.green { background-color: green; } tr.blue { background-color: blue; } tr.red { background-color: red; }
<table> <tr class="yellow"> <td></td> <td></td> <td></td> </tr> <tr class="red"> <td></td> <td></td> <td></td> </tr> <tr class="green"> <td></td> <td></td> <td></td> </tr> <tr class="blue"> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
使用nth-child
table { border-collapse: collapse; } td { border: 1px solid grey; padding: 10px 20px; } tr:nth-child(1) { background-color: red; } tr:nth-child(2) { background-color: green; } tr:nth-child(3) { background-color: blue; }
<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
您可以为具有不同颜色的每一行定义类，或者您可以为每一行使用 :nth-child(n) 伪类
你可以做这样的事情，创建一个随机函数，为表格的每一行分配随机颜色。
结帐样本
function init(){ var elements = document.getElementsByClassName('trentries'); for(var i=0; i<elements.length; i++){ getRandomColor(elements[i]); } } function getRandomColor(element) { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } element.style.background = color; }
<body onload="init()"> <table class='table'> <tr class='head'> <th>Col1</th> <th>Col2</th> <tr> <tr class='trentries'> <td class='entries'>a</td> <td class='entries'>a</td> </tr> <tr class='trentries'> <td class='entries'>a</td> <td class='entries'>a</td> </tr> <tr class='trentries'> <td class='entries'>a</td> <td class='entries'>a</td> </tr> <tr class='trentries'> <td class='entries'>a</td> <td class='entries'>a</td> </tr> </table> <body>
如何交替设置每三个html表行的不同背景颜色
[英]How to set different background color of every three html table rows in alternate
如何为html表上在同一行具有不同值的行赋予红色？
[英]How to give red color for rows on html table that have different values on same row?
如何在html中使用javascript为行和列设置替代颜色？
[英]How can I set alternate color for both rows and columns using javascript in html?
如何在Rails 3中使用javascript正确替换html行的颜色？
[英]How to properly alternate the color of html row using javascript in Rails 3?
在CSS或JavaScript中为表格的行和列设置替代颜色
[英]Set alternate color for tables rows and columns in css or javascript
当我提前知道颜色和表格长度的行数时如何在表格中交替显示多行颜色
[英]how to alternate multiple row colors in table when i know number of rows to color and table length in advance
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.