ブートストラップテーブルヘッダー固定問題

Question

私はブートストラップを使用しています。私は固定テーブルのヘッダーを使用しようとしていますが、固定されていないので、スクロールすることができます。私はscrollテーブルヘッダーにしたくない、私は固定テーブルヘッダーを持ってほしいと思う。 修正してください。

これは私のコードサンプルです：

は、これは私のコードです：

<div class="widget-content"> 
      <div class="container"> 
      <table class="table table-bordered"> 
       <thead> 
       <th class="text-center"> my</th> 
       <th class="text-center"> text/line</th> 
       <th class="text-center">caps/ lock</th> 
       <th class="text-center">Value</th> 
       <th class="text-center">Qty</th> 
       <th class="text-center">other</th> 
       </thead> 
       <tbody> 

       <tr class="dt-picked"> 
        <td class="text-center"> 
         <span style="color:white; font-weight:bold;"> text</span> 

        </td> 
        <td class="text-center"> 
        <p>text</p> 

        </td> 
        <td class="text-center "> 
        <p>text</p> 
        <p>text</p> 
        </td> 
        <td class="text-center"> <p>text</p></td> 
        <td class="text-center b-color-1"><p>text</p></td> 
        <td> 
        class="btn btn-mini btn-danger" role="button">Sell</a> 
        </td> 
       </tr> 

       <tr> 
       <td colspan="4" class="text-right no-stripe">Total Cash</td> 
       <td class="b-color-1"><p>text</p></td> 
       </tr> 
       <tr> 
       <td colspan="4" class="text-right no-stripe">Total Invested</td> 
       <td class="b-color-1"><p>text</p></td> 
       <td colspan="2" class="no-stripe"></td> 
       </tr> 
       <tr> 
       <td colspan="4" class="text-right bold no-stripe">Bottom Line</td> 
       <td class="b-color-1 bold"><p>text</p></td> 
       <td colspan="2" class="no-stripe"></td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
     </div> 

Answer 1

上の位置プロパティを使用してみてください、私はあなた

のためのフィドルを得ました

<thead> 
    <tr class="header"> 
     <th> 
     Table attribute name 
     <div>Table attribute name</div> 
     </th> 
     <th> 
     Value 
     <div>Value</div> 
     </th> 
     <th> 
     Description 
     <div>Description</div> 
     </th> 
    </tr> 
    </thead> 

https://jsfiddle.net/byB9d/14995/

Answer 2

はthead要素

<thead style="position:absolute;"> 
       <th class="text-center"> my</th> 
       <th class="text-center"> text/line</th> 
       <th class="text-center">caps/ lock</th> 
       <th class="text-center">Value</th> 
       <th class="text-center">Qty</th> 
       <th class="text-center">other</th> 
       </thead>