我正在尝试渲染这样的表:
Header1 | Header2 Header3
-------------------------
Text1 | Text2 Text3
Text1 | Text2 Text3
Text1 | Text2 Text3
Text1 | Text2 Text3
-------------------------
Text1 | Text2 Text3
Text1 | Text2 Text3
Text1 | Text2 Text3
Text1 | Text2 Text3
前四行(不计算标题)始终存在。最后第四行是可选的。如果不存在分隔线,则也不应绘制分隔线。
我的第一个想法是使用此CSS选择器:
.mytable tr:nth-child(6) > td {
border-top: 1px solid black;
}
从理论上讲,如果存在第6条线,选择器将选择它并在其上方绘制一条线(边框)。如果不存在,则首先没有任何选择。
但是实际上,即使我使用9作为:nth-child()
选择器的值,也会绘制边框。值为10时,将不再绘制边框。即使我将表编辑为仅包含前六行(并将:nth-child()
设置为九行),也是这样。
这种奇怪行为的原因是什么。有什么办法可以解决这个问题?
编辑: 根据要求包括HTML(Mako)代码。它比较复杂,但基本上可以简化为:
<table class="mytable">
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
</tr>
<tr>
<th>Text1</th>
<td>Text2</td>
<td>Text3</td>
</tr>
<tr>
<th>Text1</th>
<td>Text2</td>
<td>Text3</td>
</tr>
<tr>
<th>Text1</th>
<td>Text2</td>
<td>Text3</td>
</tr>
<tr>
<th>Text1</th>
<td>Text2</td>
<td>Text3</td>
</tr>
% for index in range(4):
<tr>
<th>Text1</th>
% for text in texts:
<td>${text}</td>
% endfor
</tr>
% endfor
</table>