Pure.CSS剥离表格用例 _表格

如果表很大, 最好将其剥离。剥离的桌子对用户来说更可见和更具吸引力。你必须在每个其他< tr> 元素中添加” pure-table-odd” 类名, 以更改行的背景并创建斑马风格的效果。
注意：在支持CSS3第n个子伪选择器的浏览器中, 可以使用更简单的方法。可以将纯表条纹的类名添加到< table> 元素, 斑马风格的条纹将自动发生。此方法在Internet Explorer 8或更低版本中不起作用。例：

< !DOCTYPE html> < html> < link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> < table class="pure-table"> < thead> < tr> < th> Roll no.< /th> < th> Name< /th> < th> Age< /th> < th> Grade< /th> < /tr> < /thead> < tbody> < tr class="pure-table-odd"> < td> 1< /td> < td> Rahul< /td> < td> 22< /td> < td> A< /td> < /tr> < tr> < td> 2< /td> < td> Rishi< /td> < td> 21< /td> < td> A< /td> < /tr> < tr class="pure-table-odd"> < td> 3< /td> < td> Ariana< /td> < td> 20< /td> < td> C< /td> < /tr> < tr> < td> 4< /td> < td> Tony< /td> < td> 21< /td> < td> A< /td> < /tr> < tr class="pure-table-odd"> < td> 5< /td> < td> Piyush< /td> < td> 18< /td> < td> A< /td> < /tr> < tr> < td> 6< /td> < td> Lucky< /td> < td> 23< /td> < td> B< /td> < /tr> < /tbody> < /table> < /html>

立即测试
【Pure.CSS剥离表格用例】输出