bootstrap表格 - 别来无恙x

<table class="table table-striped  table-bordered ">
                                            <!--
                                                作者：15573722829@qq.com
                                                时间：2017-06-06
                                                描述：table-bordered table-hover
                                            -->
            <thead>
                <tr>
                    <th>标题一</th>
                    <th>标题二</th>
                    <th>标题三</th>
                    <th>标题四</th>
                    <th>标题五</th>
                </tr> 
            </thead>
            <tbody>
                <tr>
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                    <td>内容五</td>
                </tr>
                <tr class="active">
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                    <td>内容五</td>
                </tr>
                <tr class="success">
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                    <td>内容五</td>
                </tr>
                <tr class="info">
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                    <td>内容五</td>
                </tr>
                <tr class="waring">
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                    <td>内容五</td>
                </tr>
                <tr class="danger">
                    <td>内容一</td>
                    <td>内容二</td>
                    <td>内容三</td>
                    <td>内容四</td>
                    <td>内容五</td>
                </tr>
            </tbody>
        </table>

带边框表格:. table-bordered

 1 <table class="table table-striped  ">
 2                                             
 3             <thead>
 4                 <tr>
 5                     <th>标题一</th>
 6                     <th>标题二</th>
 7                     <th>标题三</th>
 8                     <th>标题四</th>
 9                     <th>标题五</th>
10                 </tr> 
11             </thead>
12             <tbody>
13                 <tr>
14                     <td>内容一</td>
15                     <td>内容二</td>
16                     <td>内容三</td>
17                     <td>内容四</td>
18                     <td>内容五</td>
19                 </tr>
20                 <tr class="active">
21                     <td>内容一</td>
22                     <td>内容二</td>
23                     <td>内容三</td>
24                     <td>内容四</td>
25                     <td>内容五</td>
26                 </tr>
27                 <tr class="success">
28                     <td>内容一</td>
29                     <td>内容二</td>
30                     <td>内容三</td>
31                     <td>内容四</td>
32                     <td>内容五</td>
33                 </tr>
34                 <tr class="info">
35                     <td>内容一</td>
36                     <td>内容二</td>
37                     <td>内容三</td>
38                     <td>内容四</td>
39                     <td>内容五</td>
40                 </tr>
41                 <tr class="waring">
42                     <td>内容一</td>
43                     <td>内容二</td>
44                     <td>内容三</td>
45                     <td>内容四</td>
46                     <td>内容五</td>
47                 </tr>
48                 <tr class="danger">
49                     <td>内容一</td>
50                     <td>内容二</td>
51                     <td>内容三</td>
52                     <td>内容四</td>
53                     <td>内容五</td>
54                 </tr>
55             </tbody>
56         </table>

条纹状表格table-bordered

posted on 2017-06-06 19:39 别来无恙x 阅读(204) 评论(0) 编辑收藏举报

刷新页面返回顶部