StickyTableHeaders

by GlittenBerg

HTML

<script src="https://unpkg.com/sticky-table-headers"></script>
<div style="width:100%; background-color: cyan; height: 120px">Brandportal</div>
<div style="width:100%; background-color: #444; height: 60px">Menu</div>
<div style="width:100%; background-color: #fff; height: 200px"></div>
<table>
  <thead>
    <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>
     ...

CSS

body {
  margin: 0 auto;
  padding: 0 ;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #555;
}

table {
  width: calc(100% - 40px);
  border: 0;
  padding: 0;
  margin: 0 20px 20px;
  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;
}

tbody tr:hover {
  background-color: #EEEEEE;
}

td {
  text-align: right;
}

td:first-child,
th:first-child {
  text-align: left;
}

JavaScript

$(function() {
  $("table").stickyTableHeaders();
});