I have fixed first 2 columns of table but it is showing one extra row in table header.
.headcol {
position:absolute;
width:7em;
top:auto;
left: 0px;
}
.headcol2 {
position:absolute;
width:15em;
top:auto;
left: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered table-striped" style="margin-le
<table class="table table-bordered table-striped" style="margin-left: 227px;display: block;height:400px;">
<thead>
<tr>
<th rowspan="2" class="headcol">Membership No</th>
<th class="headcol2" rowspan="2">Name</th>
<th rowspan="2">Sallery No</th>
<th rowspan="2">MBS</th>
<th rowspan="2">Shares</th>
<th rowspan="2">CD</th>
<th rowspan="2">RD</th>
<th colspan="2">speciak</th>
<th colspan="2">speciah</th>
<th colspan="2">speciag</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
</tr>
</thead>
</table>
You have to remove the position: absolute
like so:
.headcol {
width:7em;
top:auto;
left: 0px;
}
.headcol2 {
width:15em;
top:auto;
left: 100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered table-striped" style="margin-le
<table class="table table-bordered table-striped" style="margin-left: 227px;display: block;height:400px;">
<thead>
<tr>
<th rowspan="2" class="headcol">Membership No</th>
<th class="headcol2" rowspan="2">Name</th>
<th rowspan="2">Sallery No</th>
<th rowspan="2">MBS</th>
<th rowspan="2">Shares</th>
<th rowspan="2">CD</th>
<th rowspan="2">RD</th>
<th colspan="2">speciak</th>
<th colspan="2">speciah</th>
<th colspan="2">speciag</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
<th>Principal</th>
<th>Interest</th>
</tr>
</thead>
</table>
Hope this helps