當水平和垂直滾動條可用時修復表格標題

Question

我想修改html表頭。我在表格中有很多列，因此需要垂直滾動條來滾動並查看列數據。我想修復表格標題，以便當用戶向下滾動以查看行時，標題是固定的。 請查閱演示http://jsfiddle.net/ZcLSE/1425/。 當用戶向下滾動表頭時，應該是固定的，對用戶可見。請諮詢。

CSS代碼：

.modal-body { 
overflow-y: auto; 
} 
tbody { 
} 
thead, tbody tr { 
} 
thead { 
    width: calc(100% - 1em) 
} 
table {border-collapse:collapse; height:300px;overflow: auto; 
    display: block;} 
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;} 

HTML代碼：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Modal title</h4> 
      </div> 
      <div class="modal-body" id="modal-body"> 
       <table class="table" border="1"> 
     <thead> 
      <tr> 
       <td>Namffffffffffffffffffffffffe</td> 
       <td>phone</td> 
       <td>Address</td> 
       <td>Street</td> 
       <td>City</td> 
       <td>Pin</td> 
       <td>Comments</td> 
       <td>info</td> 
        <td>Amount</td> 
       <td>percentage</td> 
       <td>total</td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>AAAAdddddddddddddddddddddddd</td> 
       <td>323232</td> 
       <td>BBBBB</td> 
       <td>aasdd</td> 
       <td>dfgdfg</td> 
       <td>1234</td> 
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td> 
       <td>adasdsadasd</td> 
       <td>12312</td> 
       <td>4</td> 
       <td>555</td> 
      </tr> 
      <tr> 
       <td>AAAAdddddddddddddddddddddddd</td> 
       <td>323232</td> 
       <td>BBBBB</td> 
       <td>aasdd</td> 
       <td>dfgdfg</td> 
       <td>1234</td> 
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td> 
       <td>adasdsadasd</td> 
       <td>12312</td> 
       <td>4</td> 
       <td>555</td> 
      </tr> 
         <tr> 
       <td>AAAAdddddddddddddddddddddddd</td> 
       <td>323232</td> 
       <td>BBBBB</td> 
       <td>aasdd</td> 
       <td>dfgdfg</td> 
       <td>1234</td> 
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td> 
       <td>adasdsadasd</td> 
       <td>12312</td> 
       <td>4</td> 
       <td>555</td> 
      </tr> 
         <tr> 
       <td>AAAAdddddddddddddddddddddddd</td> 
       <td>323232</td> 
       <td>BBBBB</td> 
       <td>aasdd</td> 
       <td>dfgdfg</td> 
       <td>1234</td> 
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td> 
       <td>adasdsadasd</td> 
       <td>12312</td> 
       <td>4</td> 
       <td>555</td> 
      </tr> 
         <tr> 
       <td>AAAAdddddddddddddddddddddddd</td> 
       <td>323232</td> 
       <td>BBBBB</td> 
       <td>aasdd</td> 
       <td>dfgdfg</td> 
       <td>1234</td> 
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td> 
       <td>adasdsadasd</td> 
       <td>12312</td> 
       <td>4</td> 
       <td>555</td> 
      </tr> 
         <tr> 
       <td>AAAAdddddddddddddddddddddddd</td> 
       <td>323232</td> 
       <td>BBBBB</td> 
       <td>aasdd</td> 
       <td>dfgdfg</td> 
       <td>1234</td> 
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td> 
       <td>adasdsadasd</td> 
       <td>12312</td> 
       <td>4</td> 
       <td>555</td> 
      </tr> 

         <tr> 
       <td>AAAAdddddddddddddddddddddddd</td> 
       <td>323232</td> 
       <td>BBBBB</td> 
       <td>aasdd</td> 
       <td>dfgdfg</td> 
       <td>1234</td> 
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td> 
       <td>adasdsadasd</td> 
            <td>12312</td> 
       <td>4</td> 
       <td>555</td> 
      </tr> 
         <tr> 
       <td>AAAAdddddddddddddddddddddddd</td> 
       <td>323232</td> 
       <td>BBBBB</td> 
       <td>aasdd</td> 
       <td>dfgdfg</td> 
       <td>1234</td> 
<td>adsadsadashgdhggdhsdfsdgfghsdgfsgdfhsdhfgsdfgsdhfgsdgfsdfg</td> 
       <td>adasdsadasd</td> 
            <td>12312</td> 
       <td>4</td> 
       <td>555</td> 
      </tr> 
     </tbody> 
    </table> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 

      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

PS：需要垂直和水平滾動條，表中的標題應該是固定的。

Answer 1

我試過解決小提琴問題，我相信我遇到了和你一樣的問題，thead變得比容器更大。

我會推薦這個JQuery Plugin這是專門爲您的需要。