CSS Question
I am fixing first 2 columns of table but design is not proper
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>
In this it has fixed first 2 columns but the first interest is show on the empty row.Please help.You can see my design at below :
https://jsfiddle.net/rahulpamnani/nnukubyu/1/
Answer Source
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