我有一张这样的 table :
<table id="someID">
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
</table>
我想仅使用 CSS 隐藏表格中的第二行和第三行。此表是预定义的,所以我不能使用 id 或 class 标签来指定要设置样式的行,我正在寻找一些针对特定行的解决方案。
如果这可以用 CSS 完成,谁能告诉我该怎么做。
最佳答案
这是 Solution.
HTML:
<table id="someID">
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
</table>
CSS:
table tr:nth-child(2) {display : none;}
table tr:nth-child(3) {display : none;}
您必须使用 :nth-child() 来隐藏您想要的行。
由于大多数 :nth-child() 不适用于旧版浏览器,这里是 Solution为他们。
HTML:
<table id="someID">
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
<tr><td>example text</td></tr>
<tr><td>example text</td><td>example text</td></tr>
</table>
CSS:
table tr:FIRST-CHILD + tr {
display:none;
}
table tr:FIRST-CHILD + tr + tr {
display:none;
}
希望这对现在有所帮助。
关于特定表格行的CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16647221/