如何制作粘页眉

Question

I am trying to use sticky to make my table header static while you scroll through a table and it is working but it resizes the width of the table headers (display header not properly) for some reason.

I am loading the data for my table dynamically with repeater that is look like table format like given below but It resizes the width of the table headers

These are my codes:

Javascript:

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http://example.com/js/jquery.sticky.js"></script>
<script>
  $(document).ready(function () {
    $('.header-container').sticky();
  });
</script>

CSS:

<style>
  table {
    border: 0;
    padding: 0;
    margin: 0 0 20px 0;
    border-collapse: collapse;
  }

  th {
    padding: 5px;
    /* NOTE: th padding must be set explicitly in order to support IE */
    text-align: right;
    font-weight: bold;
    line-height: 2em;
    color: #FFF;
    background-color: #555;
  }

  tbody td {
    padding: 10px;
    line-height: 18px;
    border-top: 1px solid #E0E0E0;
  }

  tbody tr:nth-child(2n) {
    background-color: #F7F7F7;
  }
</style>

HTML

<table>
  <thead class="header-container">
    <tr>
      <th colspan="9">Companies listed on NASDAQ OMX Copenhagen.</th>
    </tr>
    <tr>
      <th>Full name</th>
      <th>CCY</th>
      <th>Last</th>
      <th>+/-</th>
      <th>%</th>
      <th>Bid</th>
      <th>Ask</th>
      <th>Volume</th>
      <th>Turnover</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A.P. Møller...</td>
      <td>DKK</td>
      <td>33,220.00</td>
      <td>760</td>
      <td>2.34</td>
      <td>33,140.00</td>
      <td>33,220.00</td>
      <td>594</td>
      <td>19,791,910</td>
    </tr>
    <tr>
      <td>A.P. Møller...</td>
      <td>DKK</td>
      <td>34,620.00</td>
      <td>640</td>
      <td>1.88</td>
      <td>34,620.00</td>
      <td>34,700.00</td>
      <td>9,954</td>
      <td>346,530,246</td>
    </tr>
    <tr>
      <td>Carlsberg A</td>
      <td>DKK</td>
      <td>380</td>
      <td>0</td>
      <td>0</td>
      <td>371</td>
      <td>391.5</td>
      <td>6</td>
      <td>2,280</td>
    </tr>
    <tr>
      <td>Carlsberg B</td>
      <td>DKK</td>
      <td>364.4</td>
      <td>8.6</td>
      <td>2.42</td>
      <td>363</td>
      <td>364.4</td>
      <td>636,267</td>
      <td>228,530,601</td>
    </tr>
    <tr>
      <td>Chr. Hansen...</td>
      <td>DKK</td>
      <td>114.5</td>
      <td>-1.6</td>
      <td>-1.38</td>
      <td>114.2</td>
      <td>114.5</td>
      <td>141,822</td>
      <td>16,311,454</td>
    </tr>
    <tr>
      <td>Coloplast B</td>
      <td>DKK</td>
      <td>809.5</td>
      <td>11</td>
      <td>1.38</td>
      <td>809</td>
      <td>809.5</td>
      <td>85,840</td>
      <td>69,363,301</td>
    </tr>
    <tr>
      <td>D/S Norden</td>
      <td>DKK</td>
      <td>155</td>
      <td>-1.5</td>
      <td>-0.96</td>
      <td>155</td>
      <td>155.1</td>
      <td>51,681</td>
      <td>8,037,225</td>
    </tr>
    <tr>
      <td>Danske Bank</td>
      <td>DKK</td>
      <td>69.05</td>
      <td>2.55</td>
      <td>3.83</td>
      <td>69.05</td>
      <td>69.2</td>
      <td>1,723,719</td>
      <td>115,348,068</td>
    </tr>
    <tr>
      <td>DSV</td>
      <td>DKK</td>
      <td>105.4</td>
      <td>0.2</td>
      <td>0.19</td>
      <td>105.2</td>
      <td>105.4</td>
      <td>674,873</td>
      <td>71,575,035</td>
    </tr>
    <tr>
      <td>FLSmidth &amp; Co.</td>
      <td>DKK</td>
      <td>295.8</td>
      <td>-1.8</td>
      <td>-0.6</td>
      <td>295.1</td>
      <td>295.8</td>
      <td>341,263</td>
      <td>100,301,032</td>
    </tr>
    <tr>
      <td>G4S plc</td>
      <td>DKK</td>
      <td>22.53</td>
      <td>0.05</td>
      <td>0.22</td>
      <td>22.53</td>
      <td>22.57</td>
      <td>190,920</td>
      <td>4,338,150</td>
    </tr>
    <tr>
      <td>Jyske Bank</td>
      <td>DKK</td>
      <td>144.2</td>
      <td>1.4</td>
      <td>0.98</td>
      <td>142.8</td>
      <td>144.2</td>
      <td>78,163</td>
      <td>11,104,874</td>
    </tr>
    <tr>
      <td>Københavns ...</td>
      <td>DKK</td>
      <td>1,580.00</td>
      <td>-12</td>
      <td>-0.75</td>
      <td>1,590.00</td>
      <td>1,620.00</td>
      <td>82</td>
      <td>131,110</td>
    </tr>
    <tr>
      <td>Lundbeck</td>
      <td>DKK</td>
      <td>103.4</td>
      <td>-2.5</td>
      <td>-2.36</td>
      <td>103.4</td>
      <td>103.8</td>
      <td>157,162</td>
      <td>16,462,282</td>
    </tr>
    <tr>
      <td>Nordea Bank</td>
      <td>DKK</td>
      <td>43.22</td>
      <td>-0.06</td>
      <td>-0.14</td>
      <td>43.22</td>
      <td>43.25</td>
      <td>167,520</td>
      <td>7,310,143</td>
    </tr>
    <tr>
      <td>Novo Nordisk B</td>
      <td>DKK</td>
      <td>552.5</td>
      <td>-3.5</td>
      <td>-0.63</td>
      <td>550.5</td>
      <td>552.5</td>
      <td>843,533</td>
      <td>463,962,375</td>
    </tr>
    <tr>
      <td>Novozymes B</td>
      <td>DKK</td>
      <td>805.5</td>
      <td>5.5</td>
      <td>0.69</td>
      <td>805</td>
      <td>805.5</td>
      <td>152,188</td>
      <td>121,746,199</td>
    </tr>
    <tr>
      <td>Pandora</td>
      <td>DKK</td>
      <td>39.04</td>
      <td>0.94</td>
      <td>2.47</td>
      <td>38.8</td>
      <td>39.04</td>
      <td>350,965</td>
      <td>13,611,838</td>
    </tr>
    <tr>
      <td>Rockwool In...</td>
      <td>DKK</td>
      <td>492</td>
      <td>0</td>
      <td>0</td>
      <td>482</td>
      <td>492</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Rockwool In...</td>
      <td>DKK</td>
      <td>468</td>
      <td>12</td>
      <td>2.63</td>
      <td>465.2</td>
      <td>468</td>
      <td>9,885</td>
      <td>4,623,850</td>
    </tr>
    <tr>
      <td>Sydbank</td>
      <td>DKK</td>
      <td>95</td>
      <td>0.05</td>
      <td>0.05</td>
      <td>94.7</td>
      <td>95</td>
      <td>103,438</td>
      <td>9,802,899</td>
    </tr>
    <tr>
      <td>TDC</td>
      <td>DKK</td>
      <td>43.6</td>
      <td>0.13</td>
      <td>0.3</td>
      <td>43.5</td>
      <td>43.6</td>
      <td>845,110</td>
      <td>36,785,339</td>
    </tr>
    <tr>
      <td>Topdanmark</td>
      <td>DKK</td>
      <td>854</td>
      <td>13.5</td>
      <td>1.61</td>
      <td>854</td>
      <td>855</td>
      <td>38,679</td>
      <td>32,737,678</td>
    </tr>
    <tr>
      <td>Tryg</td>
      <td>DKK</td>
      <td>290.4</td>
      <td>0.3</td>
      <td>0.1</td>
      <td>290</td>
      <td>290.4</td>
      <td>94,587</td>
      <td>27,537,247</td>
    </tr>
    <tr>
      <td>Vestas Wind...</td>
      <td>DKK</td>
      <td>90.15</td>
      <td>-4.2</td>
      <td>-4.45</td>
      <td>90.1</td>
      <td>90.15</td>
      <td>1,317,313</td>
      <td>121,064,314</td>
    </tr>
    <tr>
      <td>William Dem...</td>
      <td>DKK</td>
      <td>417.6</td>
      <td>0.1</td>
      <td>0.02</td>
      <td>417</td>
      <td>417.6</td>
      <td>64,242</td>
      <td>26,859,554</td>
    </tr>
  </tbody>
</table>

Answer 1

Try this

<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-table-headers/0.1.24/js/jquery.stickytableheaders.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-table-headers/0.1.24/js/jquery.stickytableheaders.min.js"></script>
   <script type="text/javascript" src="http://example.com/js/jquery.sticky.js"></script>
      <script>
               $(document).ready(function () {
                   $("table").stickyTableHeaders();
        });
       </script>