1. ホーム
  2. 質問と答え
  3. ブートストラップで固定テーブルヘッダを作成するには？私は、ブートストラップのテーブルに対して固定テーブルヘッダに必要

ブートストラップで固定テーブルヘッダを作成するには？私は、ブートストラップのテーブルに対して固定テーブルヘッダに必要

2016-03-31 6 views
-2

、 いずれかは、私を導いブートストラップで固定テーブルヘッダを作成するには？私は、ブートストラップのテーブルに対して固定テーブルヘッダに必要

注意してください完璧なソリューションを持っている：それは応答テーブルでなければなりません。

出典

2016-03-31 Sathishkumar

+1

このヘルプを行います。http://stackoverflow.com/questions/21168521/scrollable-table-with-fixed -header-in-bootstrap？ –

答えて

1

次のスニペットは、次の操作を行います： -

  • 固定テーブルをブラウザのサイズが変更されたときに塗りつぶしページの100％（垂直方向と水平方向）
  • が応答
  • ヘッダ。

このcodepenでもご利用いただけます： - http://codepen.io/bobmarksie/pen/VadxoK

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 

    <style type="text/css"> 
    body { 
     padding-top: 50px; 
    } 

    .navbar { 
     height: 50px; 
     padding: 0 15px; 
     width: 100%; 
     position: fixed; 
     top: 0; 
     z-index: 1; 
    } 
    .navbar a { 
     color: white; 
     line-height: 3em; 
    } 

    .table-area { 
     position: relative; 
     z-index: 0; 
     margin-top: 50px; 
    } 

    table.responsive-table { 
     display: table; 
     /* required for table-layout to be used (not normally necessary; included for completeness) */ 
     table-layout: fixed; 
     /* this keeps your columns with fixed with exactly the right width */ 
     width: 100%; 
     /* table must have width set for fixed layout to work as expected */ 
     height: 100%; 
    } 
    table.responsive-table thead { 
     position: fixed; 
     top: 50px; 
     left: 0; 
     right: 0; 
     width: 100%; 
     height: 50px; 
     line-height: 3em; 
     background: #eee; 
     table-layout: fixed; 
     display: table; 
    } 
    table.responsive-table th { 
     background: #eee; 
    } 
    table.responsive-table td { 
     line-height: 2em; 
    } 
    table.responsive-table tr > td, table.responsive-table th { 
     text-align: left; 
    } 

    </style> 

</head> 
<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
    <a href="">Insert Brand/Logo</a> 
    </nav> 
    <section class="content-area"> 
    <div class="table-area"> 
     <table class="responsive-table table"> 
     <thead> 
      <tr> 
      <th><input type="checkbox"> First name</th> 
      <th>Last name</th> 
      <th>Points</th> 
      <th>Content</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <td><input type="checkbox"> Jill</td> 
      <td>Smith</td> 
      <td>50</td> 
      <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td> 
      </tr> 
      <tr> 
      <td><input type="checkbox"> Eve</td> 
      <td>Jackson</td> 
      <td>94</td> 
      <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td> 
      </tr> 
      <tr> 
      <td><input type="checkbox"> Jill</td> 
      <td>Smith</td> 
      <td>50</td> 
      <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td> 
      </tr> 
      <tr> 
      <td><input type="checkbox"> Eve</td> 
      <td>Jackson</td> 
      <td>94</td> 
      <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td> 
      </tr> 
      <tr> 
      <td><input type="checkbox"> Jill</td> 
      <td>Smith</td> 
      <td>50</td> 
      <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td> 
      </tr> 
      <tr> 
      <td><input type="checkbox"> Eve</td> 
      <td>Jackson</td> 
      <td>94</td> 
      <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td> 
      </tr> 
      <tr> 
      <td><input type="checkbox"> Jill</td> 
      <td>Smith</td> 
      <td>50</td> 
      <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td> 
      </tr> 
      <tr> 
      <td><input type="checkbox"> Eve</td> 
      <td>Jackson</td> 
      <td>94</td> 
      <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</td> 
      </tr> 

     </tbody> 
     </table> 
    </div> 
    </section> 
</body> 
</html>

出典

2016-04-20 13:25:35 bobmarksie

関連する問題

 関連する問題