Reputation: 9738
I have written code to keep fixed first 2 columns & other columns are horizontally
scrollable
.
My problem is, I want a fixed height
set to the table
so that it is vertically
also 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>
Upvotes: 0
Views: 84
Reputation: 6968
Since it looks like you're using Bootstrap, I took the liberty to make a Bootply demo of what you're trying to achieve.
You already had the solution really, the only thing was to apply fixed height to the table-responsive
class rather than to the table
class.
So I simply added height:200px;
to the right class (btw, in general try to avoid in-line styling).
Upvotes: 2