你能在CSS中设置两种不同的交替表行高吗？

Question

我正在尝试创建一个表，其中每隔一行约为前一行的1/3。我可以使用内联方法设置此样式，但是想知道是否可以在同一个表中为不同的tr样式创建标记。

由于

Answer 1

是的，你可以分别使用:nth-child(odd)和nth-child(even)这样的CSS伪类来做到这一点。

Demo

td {
    border: 1px solid #f00;
}

tr:nth-child(odd) {
    height: 100px;
}

如果你想定位偶数，你可以使用even。

tr:nth-child(even) {
    height: 100px;
}

请注意，上述选择器会定位文档中的所有tr和td元素，因此请务必使用class或id来定位{{ 1}}唯一的喜欢

table

Answer 2

阅读nth-child属性

  

tr:nth-child(odd)：表示HTML表格的奇数行。

     

tr:nth-child(even)：表示HTML表的偶数行。

请尝试使用以下css

tr:nth-child(odd){ height: 100px }
tr:nth-child(even) {max-height: 33%;}

Working DEMO

Answer 3

您可以使用此nth child

但是如果你的表是我动态创建的，或者有许多行不会那么容易:)

这可能会有所帮助：LESS

Answer 4

尝试：

.your-table-class tbody tr:nth-child(even) {
  line-height: 10px; // your 1/3 value here
}