【Bootstrap】表格的CSS布局

最新推荐文章于 2024-08-07 21:22:06 发布

Wendy-lxq

最新推荐文章于 2024-08-07 21:22:06 发布

阅读量6.8k

点赞数 3

分类专栏： Bootstrap 文章标签： Bootstrap 表格

本文链接：https://blog.csdn.net/u010297791/article/details/73224800

版权

本文介绍了如何使用Bootstrap的.table样式及其附加样式创建美观的表格，包括基础样式、斑马条纹、带边框的表格和紧凑型表格。同时，讲解了.table-responsive容器样式实现响应式表格的方法，使其在不同屏幕尺寸下展示良好。

摘要由CSDN通过智能技术生成

表格在开发中经常会用到，尤其是在展示数据的时候，一个美观的表格设计非常重要。Bootstrap提供了表格组件，其中包括1种基础.table样式，4种附加样式（.table-striped，.table-bordered，.table-hover，.table-condensed）以及一个支持响应式布局的.table-responsive容器样式。需要注意的是每种样式都是在.table样式的基础上联合应用才有效。

补充：

为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用TBODY可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。
tbody、tfoot、thead一般来说用得不是很多，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用: thead, tbody, tfoot来标注。

thead　表格的头用来放标题之类的东西
tbody　表格的身体放数据本体
tfoot　表格的脚放表格的脚注之类

tbody包含行的内容下载完优先显示，不必等待表格结束.另外，还需要注意一个地方。表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就“从头到脚”显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。

1、基础样式

基础样式只需要在table元素上加上类名.table即可制作出比较漂亮的表格。示例如下：

<table class="table">
……
</table>

这里写一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet">
    <title>Table</title>
</head>
<body>
<table class="table">
    <tbody>
        <tr>
            <th>姓名</th>
            <th>毕业学校</th>
            <th>联系方式</th>
            <th>地址</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>李四</td>
            <td>王五</td>
            <td>陈六</td>
        </tr>
        <tr>
            <td>清华大学</td>
            <td>北京大学</td>
            <td>浙江大学</td>
            <td>厦门大学</td>
        </tr>
        <tr>
            <td>13122222222</td>
            <td>13233333333</td>
            <td>15644444444</td>
            <td>17866666666</td>
        </tr>
        <tr>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
            <td>中国XX省XX市XX县</td>
        </tr>
    </tbody>

</table>
</body>
</html>

运行效果如下：