Pure.CSS边框表介绍

什么是Pure.CSS?

Pure.CSS是一个轻量级、全面的CSS框架，专注于现代浏览器（IE8及以上），提供可伸缩的响应式网格、常规和差异化的UI组件、加强的表单控件等等。

什么是Pure.CSS边框表?

Pure.CSS边框表是一种Pure.CSS提供的UI组件，它可以让你快速轻松地创建带有边框的表格。边框表是在Pure.CSS表格基础之上进一步增强的，主要区别在于带有边框且能为表格提供清晰的边框间隔。

如何使用Pure.CSS边框表?

使用Pure.CSS边框表非常简单，只需在HTML代码中将表格包含在具有“pure-table-bordered”类的DIV标签中就可以了。如下所示：

<div class="pure-table-bordered">
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>25</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>
</div>

以上代码会生成一个带有边框的表格，如下图所示：

此外，你还可以使用以下样式类对Pure.CSS边框表进行进一步的自定义：

• .pure-table-striped：为表格的奇数行添加斑马线状背景色。
• .pure-table-horizontal：将表格转换成水平显示的形式。
• .pure-table-vertical：将表格转换成垂直显示的形式。

总结

Pure.CSS边框表是Pure.CSS提供的一款非常方便易用的UI组件，可以帮助你快速创建带有边框的表格。使用Pure.CSS边框表，你可以不用花费大量时间和精力手动调整表格样式，从而更加专注于你的开发工作。