Question

我已修复了表格的前两列，但它在表格标题中显示了一个额外的行。

.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>

在这里它已经修复了前两列，但第一个兴趣显示在空行上。请帮忙。你可以在下面看到我的设计：

https://jsfiddle.net/rahulpamnani/nnukubyu/1/

Answer 1

删除absolute position，以便第二个标题不重叠

如果这是你想要的，我理解了这个问题

＆＃13;

.headcol {
  
  width:7em; 
  top:auto;
  left: 0px;
}
.headcol2 {
   
  width:15em; 
  top:auto;
  left: 100px;
}

＆＃13;

<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-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>

＆＃13;

Answer 2

您必须删除position: absolute 像这样：

.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>

希望这有帮助

Answer 3

 .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></th>
      <th>Principal</th>
      <th>Interest</th>
      <th>Principal</th>
      <th>Interest</th>
      <th>Principal</th>
      <th>Interest</th>
   </tr>

只需在第二行创建一个额外的列。当要水平滚动表格时，我希望前两列表格固定。

我正在修复前两列表，但设计不合适

3 个答案: