如何使用css将不同的颜色应用于HTML中的不同行[不是交替行，而是任意颜色到任何行]
如何使用css将不同的颜色应用于HTML中的不同行[不是交替行，而是任意颜色到任何行]
提问于 2016-06-01 14:17:23
如图所示，我希望将不同的颜色应用于不同的行和列，而不仅仅是交替的行和列
回答 3
Stack Overflow用户
发布于 2016-06-01 14:25:44
请查看下面的示例。
- 将
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>
Stack Overflow用户
发布于 2016-06-01 14:22:07
您可以使用不同的颜色为每一行定义类，也可以为每一行使用:nth-child(n)伪类
Stack Overflow用户
发布于 2016-06-01 14:58:48
您可以这样做，创建一个随机函数，将随机颜色分配给表的每一行。
检出其中的一个样本
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37560812
复制相关文章
相似问题
腾讯云开发者
