2017-07-31 85 views
2

我正在使用引導程序。我試圖使用一個固定的表頭,但它沒有被修復,它可以滾動。我不想scroll表頭,我想有一個固定的表頭。 請幫我解決它。bootstrap表頭固定問題

這是我的代碼示例:

這是我的代碼:

<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> 

回答

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/

0

嘗試使用position屬性上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> 
+0

先生,即時使用'位置:絕對',文字不對齊後,'位置:絕對'或'位置:固定'? – core114

+0

@ core114​​ jut對文本「text-align:center」使用另一個屬性 –