Rahgav Rahgav - 13 days ago 5
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

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

Comments