冻结列垂直滚动发行

Question

FIDDLE

我写的代码，以保持固定的第一列2其他&列horizontallyscrollable。

我的问题是，我想要一个fixed height设置为table，所以它是vertically也scrollable。

<div class="table-responsive" style="width: 400px; overflow-x:scroll; margin-left:354px;"> 
<table class="table table-bordered" border="1"> 
    <thead> 
     <tr class="tblHeadings"> 
      <th class="fixCol1 headCol"> 
       <div style="height: 40px;padding-top: 19px;">Code</div> 
      </th> 
      <th class="fixCol2 headCol"> 
       <div style="height: 40px;padding-top: 19px;">Name</div> 
      </th> 
      <th style="width:120px;height: 54px;">Days 
       <input type="hidden" name="monthlyField" value="LD"> 
      </th>     
      <th style="width:120px;height: 54px;">EARNG1 
       <input type="hidden" name="monthlyField" value="EARNG1"> 
      </th> 
      <th style="width:120px;height: 54px;">EARNG2 
       <input type="hidden" name="monthlyField" value="EARNG2"> 
      </th>     
      <th style="width:100px">Action</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="fixCol1">GT001 
       <input type="hidden" name="empID" value="1"> 
       <input type="hidden" name="empCode" value="GT001"> 
      </td> 
      <td class="fixCol2">Brock</td> 
      <td> 
       <input type="number" max="31" step="0.01" value="" name="1|LD" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <input type="number" step="0.01" value="" name="1|WEEKOFF_DAYS" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <input type="number" step="0.01" value="" name="1|EARNG1" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <input type="number" step="0.01" value="" name="1|EARNG2" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <input type="number" step="0.01" value="" name="1|EARNG3" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <input type="number" step="0.01" value="" name="1|EARNG4" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <input type="number" step="0.01" value="" name="1|EARNG5" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'1')">Delete</button> 
      </td> 
     </tr> 
     <tr> 
      <td class="fixCol1">GT002 
       <input type="hidden" name="empID" value="2"> 
       <input type="hidden" name="empCode" value="GT002"> 
      </td> 
      <td class="fixCol2">John</td> 
      <td> 
       <input type="number" max="31" step="0.01" value="" name="2|LD" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <input type="number" step="0.01" value="" name="2|WEEKOFF_DAYS" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <input type="number" step="0.01" value="" name="2|EARNG1" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <input type="number" step="0.01" value="" name="2|EARNG2" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <input type="number" step="0.01" value="" name="2|EARNG3" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <input type="number" step="0.01" value="" name="2|EARNG4" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <input type="number" step="0.01" value="" name="2|EARNG5" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'2')">Delete</button> 
      </td> 
     </tr> 
     <tr> 
      <td class="fixCol1">GT003 
       <input type="hidden" name="empID" value="3"> 
       <input type="hidden" name="empCode" value="GT003"> 
      </td> 
      <td class="fixCol2">Walker Ross</td> 
      <td> 
       <input type="number" max="31" step="0.01" value="" name="3|LD" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <input type="number" step="0.01" value="" name="3|WEEKOFF_DAYS" class="form-control tdTextboxes"> 
      </td> 
      <td> 
       <button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'3')">Delete</button> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

因为它看起来像你使用Bootstrap，我冒昧地使你想达到什么a Bootply demo。

您已经有了解决方案，唯一的办法是将固定高度应用于table-responsive类，而不是table类。

所以我只是将height:200px;添加到正确的类（顺便说一句，一般来说，尽量避免线内样式）。