html bootstrap 表头固定在顶部,表列 可以自由滚动的效果

作者: 小小——开心
发布时间:2015-07-02 17:22:42

该效果主要是依照 bootstrap 的一个样式,;

参考网址为:http://v3.bootcss.com/components/#navbar-fixed-top

贴上代码。

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    2 <html xmlns="http://www.w3.org/1999/xhtml">    3 <head>    4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    5 <title>无标题文档</title>    6 <script type="text/javascript" src="js/jquery2.0.3.min.js"></script>    7 <script type="text/javascript" src="js/bootstrap.min.js"></script>    8 <link rel="stylesheet" href="css/bootstrap.min.css">    9 <link rel="stylesheet" href="css/bootstrap-theme.min.css">   10 <style>   11 .table tr th,.table tr td{ width:25% !important;}   12 </style>   13 </head>   14    15 <body>   16 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">   17   <div class="container">   18    <table class="table  table-bordered" style="margin-top:9px;">   19         <tr>   20             <th>dksliesjfd</th>   21             <th>dksliesjfd</th>   22             <th>dksliesjfd</th>   23             <th>dksliesjfd</th>   24         </tr>   25     </table>   26   </div>   27 </nav>   28 <div class="container" style="margin-top:80px;">   29  <table class="table table-bordered">   30         <tr>   31             <td>dksliesjfd dsdsdsliesjfd dsdsdssliesjfd dsdsdssliesjfd dsdsdssd</td>   32             <td>时光深处,岁月静好.时光深处,岁月静好.时光深处,岁月静好.</td>   33             <td>dksliesjfd</td>   34             <td>dksliesjfd</td>   35         </tr>   36         <tr>   37             <td>dksliesjfd</td>   38             <td>dksliesjfd</td>   39             <td>dksliesjfd</td>   40             <td>dksliesjfd</td>   41         </tr>   42         <tr>   43             <td>dksliesjfd</td>   44             <td>dksliesjfd</td>   45             <td>dksliesjfd</td>   46             <td>dksliesjfd</td>   47         </tr>   48         <tr>   49             <td>dksliesjfd</td>   50             <td>dksliesjfd</td>   51             <td>dksliesjfd</td>   52             <td>dksliesjfd</td>   53         </tr>   54         <tr>   55             <td>dksliesjfd</td>   56             <td>dksliesjfd</td>   57             <td>dksliesjfd</td>   58             <td>dksliesjfd</td>   59         </tr>   60         <tr>   61             <td>dksliesjfd</td>   62             <td>dksliesjfd</td>   63             <td>dksliesjfd</td>   64             <td>dksliesjfd</td>   65         </tr>   66         <tr>   67             <td>dksliesjfd</td>   68             <td>dksliesjfd</td>   69             <td>dksliesjfd</td>   70             <td>dksliesjfd</td>   71         </tr>   72         <tr>   73             <td>dksliesjfd</td>   74             <td>dksliesjfd</td>   75             <td>dksliesjfd</td>   76             <td>dksliesjfd</td>   77         </tr>   78         <tr>   79             <td>dksliesjfd</td>   80             <td>dksliesjfd</td>   81             <td>dksliesjfd</td>   82             <td>dksliesjfd</td>   83         </tr>   84         <tr>   85             <td>dksliesjfd</td>   86             <td>dksliesjfd</td>   87             <td>dksliesjfd</td>   88             <td>dksliesjfd</td>   89         </tr>   90         <tr>   91             <td>dksliesjfd</td>   92             <td>dksliesjfd</td>   93             <td>dksliesjfd</td>   94             <td>dksliesjfd</td>   95         </tr>   96         <tr>   97             <td>dksliesjfd</td>   98             <td>dksliesjfd</td>   99             <td>dksliesjfd</td>  100             <td>dksliesjfd</td>  101         </tr>  102         <tr>  103             <td>dksliesjfd</td>  104             <td>dksliesjfd</td>  105             <td>dksliesjfd</td>  106             <td>dksliesjfd</td>  107         </tr>  108         <tr>  109             <td>dksliesjfd</td>  110             <td>dksliesjfd</td>  111             <td>dksliesjfd</td>  112             <td>dksliesjfd</td>  113         </tr>  114         <tr>  115             <td>dksliesjfd</td>  116             <td>dksliesjfd</td>  117             <td>dksliesjfd</td>  118             <td>dksliesjfd</td>  119         </tr>  120         <tr>  121             <td>dksliesjfd</td>  122             <td>dksliesjfd</td>  123             <td>dksliesjfd</td>  124             <td>dksliesjfd</td>  125         </tr><tr>  126             <td>dksliesjfd</td>  127             <td>dksliesjfd</td>  128             <td>dksliesjfd</td>  129             <td>dksliesjfd</td>  130         </tr>  131         <tr>  132             <td>dksliesjfd</td>  133             <td>dksliesjfd</td>  134             <td>dksliesjfd</td>  135             <td>dksliesjfd</td>  136         </tr>  137         <tr>  138             <td>dksliesjfd</td>  139             <td>dksliesjfd</td>  140             <td>dksliesjfd</td>  141             <td>dksliesjfd</td>  142         </tr>  143         <tr>  144             <td>dksliesjfd</td>  145             <td>dksliesjfd</td>  146             <td>dksliesjfd</td>  147             <td>dksliesjfd</td>  148         </tr><tr>  149             <td>dksliesjfd</td>  150             <td>dksliesjfd</td>  151             <td>dksliesjfd</td>  152             <td>dksliesjfd</td>  153         </tr>  154         <tr>  155             <td>dksliesjfd</td>  156             <td>dksliesjfd</td>  157             <td>dksliesjfd</td>  158             <td>dksliesjfd</td>  159         </tr>  160         <tr>  161             <td>dksliesjfd</td>  162             <td>dksliesjfd</td>  163             <td>dksliesjfd</td>  164             <td>dksliesjfd</td>  165         </tr>  166         <tr>  167             <td>dksliesjfd</td>  168             <td>dksliesjfd</td>  169             <td>dksliesjfd</td>  170             <td>dksliesjfd</td>  171         </tr>  172           173         <tr>  174             <td>dksliesjfd</td>  175             <td>dksliesjfd</td>  176             <td>dksliesjfd</td>  177             <td>dksliesjfd</td>  178         </tr>  179         <tr>  180             <td>dksliesjfd</td>  181             <td>dksliesjfd</td>  182             <td>dksliesjfd</td>  183             <td>dksliesjfd</td>  184         </tr>  185         <tr>  186             <td>dksliesjfd</td>  187             <td>dksliesjfd</td>  188             <td>dksliesjfd</td>  189             <td>dksliesjfd</td>  190         </tr>  191         <tr>  192             <td>dksliesjfd</td>  193             <td>dksliesjfd</td>  194             <td>dksliesjfd</td>  195             <td>dksliesjfd</td>  196         </tr>  197         <tr>  198             <td>dksliesjfd</td>  199             <td>dksliesjfd</td>  200             <td>dksliesjfd</td>  201             <td>dksliesjfd</td>  202         </tr>  203         <tr>  204             <td>dksliesjfd</td>  205             <td>dksliesjfd</td>  206             <td>dksliesjfd</td>  207             <td>dksliesjfd</td>  208         </tr>  209         <tr>  210             <td>dksliesjfd</td>  211             <td>dksliesjfd</td>  212             <td>dksliesjfd</td>  213             <td>dksliesjfd</td>  214         </tr>  215         <tr>  216             <td>dksliesjfd</td>  217             <td>dksliesjfd</td>  218             <td>dksliesjfd</td>  219             <td>dksliesjfd</td>  220         </tr>  221     </table>  222 </div>  223 </body>  224 </html>

 还有一种方法,是 position:fixed; top:0;也是可以固定在顶部。

但是,bootstrap 可以自适应网页,简单快捷。

第二种方法:如下,给每个td,th设置宽度,这样便可以是表的布局样式相同

/* 增加表头固定,表内容 有滚动条 --start*/    table thead{display: block;}    table tbody{display: block; height: 300px; overflow: auto;}    table thead tr th:nth-child(1){width: 107px;}    table thead tr th:nth-child(2){width: 130px;}    table thead tr th:nth-child(3){width: 152px;}    table thead tr th:nth-child(4){width: 133px;}    table thead tr th:nth-child(5){width: 142px;}    table thead tr th:nth-child(6){width: 111px;}    table thead tr th:nth-child(7){width: 212px;}    table thead tr th:nth-child(8){width: 160px;}      table tbody tr td:nth-child(1){width: 109px;}    table tbody tr td:nth-child(2){width: 132px;}    table tbody tr td:nth-child(3){width: 155px;}    table tbody tr td:nth-child(4){width: 135px;}    table tbody tr td:nth-child(5){width: 144px;}    table tbody tr td:nth-child(6){width: 114px;}    table tbody tr td:nth-child(7){width: 214px;}    table tbody tr td:nth-child(8){width: 145px;}

 

标签: Bootstrap HTML
来源:http://www.cnblogs.com/xiaoxiao2014/p/4146744.html

推荐: