srcmini如果表很大, 最好将其剥离。剥离的桌子对用户来说更可见和更具吸引力。你必须在每个其他<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>立即测试
输出
评论前必须登录！
注册