时间戳

首页 > 解决方案 > 如何使用 Div 在页面上格式化 2 个不同的表格？

html - 如何使用 Div 在页面上格式化 2 个不同的表格？

问题描述

我正在尝试在一个页面上使用两个或多个表格。我的表格被格式化为具有不同颜色的交替行。实际上每个单元格是不同的颜色但相同的概念。我想制作第二张桌子并让它使用一组不同的交替颜色。

只要我有一个表就可以使用的 CSS 格式是：

/* controls 1st cell of ev odd row */
tr:nth-child(odd) td:nth-child(3n+1) {
background-color: rgba(191, 178, 178, 0.44);
color: black;
text-align: center;
}
/* controls 2nd cell of ev odd row */
tr:nth-child(odd) td:nth-child(3n+2) {
background-color: rgba(216, 177, 161, 0.46);
color: navy;
text-align: center;
}

这是在 html 中调用的，当我编写 & 时，一切都会交替出现。

现在我试过了：

div.colonial {
/* controls 1st cell of ev odd row */
tr:nth-child(odd) td:nth-child(3n+1) {
background-color: rgba(191, 178, 178, 0.44);
color: black;
text-align: center;
}
/* more tr commands  */
}
</div>

但似乎使用 a 会导致 tr:nth-child 的东西根本不起作用。

如何专门格式化我的表格以使用 TD 背景颜色命令？

这是奇数单元格的一个条目的完整 css

table {
width: 1000px;
height: auto;
border-collapse: separate;
border: 4px solid rgb(82,82,84);
border-spacing: 0.5rem;
vertical-align: top;
/* background-color: white; */
display:block;
}

/* controls 1st cell of ev odd row */
tr:nth-child(odd) td:nth-child(3n+1) {
background-color: rgba(41, 148, 87, 0.54);
color: black;
text-align: center;
}

/* controls 2nd cell of ev odd row */
tr:nth-child(odd) td:nth-child(3n+2) {
background-color: rgba(84, 146, 111, 0.50);
color: navy;
text-align: center;
}

/* controls 3rd cell of ev odd row */
tr:nth-child(odd) td:nth-child(3n+3) {
background-color: rgba(132, 167, 147, 0.50);
color: midnightblue;
text-align: center;
}

这是一个使用带有一个表的 css 的页面的链接。每行中的第一个单元格更暗，然后单元格 2 更亮，单元格 3 更亮。然后对于下一行，我有我的其他颜色序列。但是我不能将它与两个表一起使用。
具有不同单元格颜色图案的表格

标签： htmlcss

解决方案

如果两个表共享一个共同的父级，您可以使用table:nth-child(2)或简单地将一个类添加到您的第二个表并使用table.myTableClass tr:nth-child(odd) etc..

您可能会考虑使用:nth-of-type您的彩色条纹，顺便说一句，它更干净/更简单。 CSS技巧

这是一个 jsfiddle，我在其中使用更新后的问题中的代码来让两个表使用不同的颜色。 https://jsfiddle.net/wq6fc8p2/

HTML

<table class="t1">

</table>

<table class="t2">

</table>

CSS

table {
width: 1000px;
height: auto;
border-collapse: separate;
border: 4px solid rgb(82,82,84);
border-spacing: 0.5rem;
vertical-align: top;
/* background-color: white; */
display:block;
}

/* controls 1st cell of ev odd row */
.t1 tr:nth-child(odd) td:nth-child(3n+1) {
background-color: rgba(41, 148, 87, 0.54);
color: black;
text-align: center;
}

/* controls 2nd cell of ev odd row */
.t1 tr:nth-child(odd) td:nth-child(3n+2) {
background-color: rgba(84, 146, 111, 0.50);
color: navy;
text-align: center;
}

/* controls 3rd cell of ev odd row */
.t1 tr:nth-child(odd) td:nth-child(3n+3) {
background-color: rgba(132, 167, 147, 0.50);
color: midnightblue;
text-align: center;
}

/* controls 1st cell of ev odd row */
.t2 tr:nth-child(odd) td:nth-child(3n+1) {
background-color: rgba(22, 248, 187, 0.54);
color: black;
text-align: center;
}

/* controls 2nd cell of ev odd row */
.t2 tr:nth-child(odd) td:nth-child(3n+2) {
background-color: rgba(1, 199, 11, 0.50);
color: navy;
text-align: center;
}

/* controls 3rd cell of ev odd row */
.t2 tr:nth-child(odd) td:nth-child(3n+3) {
background-color: rgba(120, 150, 75, 0.50);
color: midnightblue;
text-align: center;
}

推荐阅读