Замороженные столбцы Вертикальная прокрутка Issue

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; в нужном классе (кстати, в общем, старайтесь избегать встроенного стиля).