BootStrap表格

最新推荐文章于 2016-05-03 16:48:11 发布

花果山总钻风

最新推荐文章于 2016-05-03 16:48:11 发布

阅读量754

点赞数

分类专栏： BootStrap

本文链接：https://blog.csdn.net/dszgf5717/article/details/47185219

版权

BootStrap 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

摘自《极客学院》

1、效果图：

2、html代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="bootstrap.min.css" rel="stylesheet">
    <title></title>
</head>
<body>
    <div class="container">
        <!--响应式表格,浏览器缩放时自动生成滚动条 class="table-responsive"-->
        <div class="table-responsive">
        <!--<div class="row" name="table1">-->
            <!--紧凑型 class="table table-condensed"-->
            <!--<table class="table table-condensed">-->
            <!--条纹状 边框 鼠标悬停-->
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <!--指定颜色 active-->
                    <tr class="active">
                        <th>表格标题</th>
                        <th>表格标题</th>
                        <th>表格标题</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="warning">
                        <td>表格内容</td>
                        <td>表格内容</td>
                        <td>表格内容</td>
                    </tr>
                    <tr class="info">
                        <td>表格内容表格内容表格内容</td>
                        <td>表格内容表格内容表格内容</td>
                        <td>表格内容表格内容表格内容</td>
                    </tr>
                    <tr>
                        <td>表格内容</td>
                        <td>表格内容</td>
                        <td>表格内容</td>
                    </tr>
                    <tr class="danger">
                        <td>表格内容表格内容表格内容</td>
                        <td>表格内容表格内容表格内容</td>
                        <td>表格内容表格内容表格内容</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>