[英]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.