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