javascript - 滚动时如何修复表头

Question

我的表 thead 有 2 个 tr，分别是 colspan 和 rowspan，如下图所示:

<table id="header-fixed">
    <thead>                     
        <tr id="tr1" role="row" style="background-color: rgb(204, 9, 47);">
            <th rowspan="2" colspan="1">Unidade</th>
            <th rowspan="1" colspan="1">Orçado</th>
            <th rowspan="1" colspan="1">Realizado</th>
            <th rowspan="1" colspan="3">Atingimento no Resultado - Variação</th>
        </tr>
        <tr id="tr2" role="row" style="background-color: rgb(204, 9, 47);">
            <th rowspan="1" colspan="1">Resultado</th>
            <th rowspan="1" colspan="1">Resultado</th>
            <th rowspan="1" colspan="1">Variação</th>
            <th rowspan="1" colspan="1">%</th>
            <th rowspan="1" colspan="1">Ating.</th>
        </tr>
    </thead>
...
</table>

我需要在滚动时修复这个表的标题，所以，我找到了这段代码:

https://stackoverflow.com/a/4709775/8032896

这段代码几乎可以工作，当我滚动时，标题是固定的，但列宽不合适，就像这张图片。

有人可以帮助我吗？

Answer 1

试试这个例子

    td {
      border-bottom: 1px solid #ccc;
      padding: 5px;
      text-align: left; /* IE */
    }
    td + td {
      border-left: 1px solid #ccc;
    }
    th {
      padding: 0 5px;
      text-align: left; /* IE */
    }
    .header-background {
      border-bottom: 1px solid black;
    }
    
    /* above this is decorative, not part of the test */
    
    .fixed-table-container {
      width: 50%;
      height: 200px;
      border: 1px solid black;
      margin: 10px auto;
      background-color: white;
      /* above is decorative or flexible */
      position: relative; /* could be absolute or relative */
      padding-top: 30px; /* height of header */
    }

    .fixed-table-container-inner {
      overflow-x: hidden;
      overflow-y: auto;
      height: 100%;
    }
     
    .header-background {
      background-color: #D5ECFF;
      height: 30px; /* height of header */
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
    }
    
    table {
      background-color: white;
      width: 100%;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .th-inner {
      position: absolute;
      top: 0;
      line-height: 30px; /* height of header */
      text-align: left;
      border-left: 1px solid black;
      padding-left: 5px;
      margin-left: -5px;
    }
    .first .th-inner {
        border-left: none;
        padding-left: 6px;
      }
		
	
    
    /* for complex headers */
    
    .complex.fixed-table-container {
      padding-top: 60px; /* height of header */
      overflow-x: hidden; /* for border */
    }
    
    .complex .header-background {
      height: 60px;
    }
    
    .complex-top .th-inner {
      border-bottom: 1px solid black;
      width: 100%
    }
    
    .complex-bottom .th-inner {
      top: 30px;
      width: 100%
    }
    
    .complex-top .third .th-inner { /* double row cell */
      height: 60px;
      border-bottom: none;
      background-color: #D5ECFF;
    }
    

 <div class="fixed-table-container complex">
      <div class="header-background"> </div>
      <div class="fixed-table-container-inner">
        <table cellspacing="0">
          <thead>
            <tr class="complex-top">
              <th class="first" colspan="2">
                <div class="th-inner">First and Second</div>
              </th>
              <th class="third" rowspan="2">
                <div class="th-inner">Third</div>
              </th>
            </tr>
            <tr class="complex-bottom">
              <th class="first">
                <div class="th-inner">First</div>
              </th>
              <th class="second">
                <div class="th-inner">Second</div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>First</td>
              <td>First</td>
              <td>First</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>First</td>
              <td>Second</td>
              <td>Third</td>
            </tr>
            <tr>
              <td>Last</td>
              <td>Last</td>
              <td>Last</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>