个性化阅读
专注于IT技术分析

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>

立即测试

输出

PureCSS表格4
赞(0) 打赏
未经允许不得转载:srcmini » Pure.CSS剥离表格用例
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏