Pure.CSS带有水平边框的表格

如果只希望表中有水平线, 则将pure-table-horizontal类名添加到<table>元素中。它将创建仅包含水平线的表格。

例：

<!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 pure-table-horizontal">
    <thead>
        <tr>
            <th>Roll no.</th>
            <th>Name</th>
            <th>Age</th>
            <th>Grade</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <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>
            <td>3</td>
            <td>Ariana</td>
            <td>20</td>
            <td>C</td>
        </tr>
    </tbody>
</table>
</html>

立即测试

输出

猜你喜欢