案例：Bootstrap案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <title>Bootstrap 实例 - 响应式表格</title>
6
    <link rel="stylesheet" href="/css/bootstrap/bootstrap3.3.7.min.css">
7
    <script src="/js/bootstrap/jquery.min.js"></script>
8
    <script src="/js/bootstrap/bootstrap3.3.7.min.js"></script>
9
</head>
10
<body>
11
​
12
<div class="table-responsive">
13
    <table class="table">
14
        <caption>响应式表格布局</caption>
15
        <thead>
16
            <tr>
17
                <th>产品</th>
18
                <th>付款日期</th>
19
                <th>状态</th>
20
            </tr>
21
        </thead>
22
        <tbody>
23
            <tr>
24
                <td>产品1</td>
25
                <td>23/11/2013</td>
26
                <td>待发货</td>
27
            </tr>
28
            <tr>
29
                <td>产品2</td>
30
                <td>10/11/2013</td>
31
                <td>发货中</td>
32
            </tr>
33
            <tr>
34
                <td>产品3</td>
35
                <td>20/10/2013</td>
36
                <td>待确认</td>
37
            </tr>
38
            <tr>
39
                <td>产品4</td>
40
                <td>20/10/2013</td>
41
                <td>已退货</td>
42
            </tr>
43
        </tbody>
44
</table>
45
</div>
46
​
47
</body>
48
</html>