7.7.2 面板嵌套表格

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.5k 阅读时长 ≈ 3 分钟

7.7.2 面板嵌套表格

如果想将表格添加到面板中,只要为表格添加.table样式即可,这样面板和表格看上去更像一个整体。表格既可放在面板的主体(.panel-body元素)内,也可直接放在面板中。

在面板主体中放置表格

下面是将表格放在面板主体(.panel-body元素)内的示例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 面板嵌套表格 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <!-- 面板 -->
        <div class="panel panel-primary">
            <!-- 面板头 -->
            <div class="panel-heading">
                <h1 class="panel-title">疯狂软件教育中心</h1>
            </div>
            <!-- 面板主体 -->
            <div class="panel-body">
                疯狂软件的系列教材
                <!-- 在面板主体中添加表格 -->
                <table class="table table-hover table-condensed table-bordered">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>书名</th>
                            <th>价格</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>疯狂前端开发讲义</td>
                            <td>79</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>疯狂Android讲义</td>
                            <td>108</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 面板脚注 -->
            <div class="panel-footer">
                <address>天河区沣宏大厦3楼</address>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

直接在面板容器下放置表格

如果直接将表格放在面板内,而不是放在.panel-body元素内,那么面板标题会和表格连接起来,没有空隙。

例如如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> 面板嵌套表格 </title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h1 class="panel-title">疯狂软件教育中心</h1>
            </div>
            <table class="table table-hover table-bordered">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>书名</th>
                        <th>价格</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>疯狂前端开发讲义</td>
                        <td>79</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>疯狂Android讲义</td>
                        <td>108</td>
                    </tr>
                </tbody>
            </table>
            <div class="panel-footer">
                <address>天河区沣宏大厦3楼</address>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

该代码直接将<table>元素放在面板中,这样该表格将会和面板标题连接起来。