I am fixing first 2 columns of table but design is not proper

Question

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 1

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

I am fixing first 2 columns of table but design is not proper

Sign up