html - 你能在 CSS 中设置两个不同的交替表格行高吗？

Question

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

谢谢

Answer 1

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

Demo

td {
    border: 1px solid #f00;
}

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

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

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

请注意，上述选择器将针对文档上的所有trandtd元素，因此请确保您使用classor anid来定位table唯一的like

.table-class tr:nth-child(odd) {
    /* Styles goes here */
}

Answer 2

读取第 n 个子属性

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

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

所以试试下面的css

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

工作演示

Answer 3

您可以使用第 n 个孩子

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

也许这会有所帮助：LESS

Answer 4

尝试：

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