how i can fix a table header when scroll

Question

My table thead have 2 tr with diferents colspan and rowspan like this following picture:

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

I need fix the header of this table when scrolling, so, i found this code:

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

This code almost work, when I scroll, the header is fixed, but column width is misfit like this picture.

Can someone help me?

@Hitmands, thank you for your comment, i will try this code ! — sergioBertolazzo, Jun 19 '17 at 15:40
Hmm then you need to do the [hard way](https://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling). There is this pure CSS way(`position: sticky`) but unfortunately this works only on latest Chrome browsers. Waiting for support on other browsers. — Nikhil Nanjappa, Jun 19 '17 at 15:44
@UdhayTitus, how i can set the columns width just of the second ? — sergioBertolazzo, Jun 19 '17 at 15:44
refer this link it may useful for you http://mkoryak.github.io/floatThead/ — Udhay Titus, Jun 19 '17 at 15:45

score 2 · Accepted Answer · answered Jun 19 '17 at 15:56

try this example

    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>

how i can fix a table header when scroll

1 Answers1