demo/border-collapse.html

<!DOCTYPE html>
<!--[if lt IE 8]><html lang="en" class="legacy"><![endif]-->
<!--[if gte IE 8]><!--><html lang="en"><!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <title>border-collapse Demo</title>
    <style type="text/css">
      table { border-collapse: collapse; width: 901px; }
      th,
      td { font-size: 22px; border: 1px solid #000; background-color: #fff; padding:5px; }
    </style>
  </head>
  <body style="padding:50px">
    <h1>border-collapse Demo</h1>
    <table>
      <thead>
        <tr>
          <th>Label</th>
          <th>Layout width</th>
          <th>Column width</th>
          <th>Gutter width</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Smartphones</td>
          <td>480px and below</td>
          <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
        </tr>
        <tr>
          <td>Smartphones to tablets</td>
          <td>767px and below</td>
          <td class="muted" colspan="2">Fluid columns, no fixed widths</td>
        </tr>
        <tr>
          <td>Portrait tablets</td>
          <td>768px and above</td>
          <td>42px</td>
          <td>20px</td>
        </tr>
        <tr>
          <td>Default</td>
          <td>980px and up</td>
          <td>60px</td>
          <td>20px</td>
        </tr>
        <tr>
          <td>Large display</td>
          <td>1200px and up</td>
          <td>70px</td>
          <td>30px</td>
        </tr>
      </tbody>
    </table>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="../js/jquery.stickytableheaders.js"></script>
  <script>

    $(document).ready(function () {
      // adding filler rows
      for(var i = 0; i < 3; i++){
        $('tbody tr').clone().appendTo('table');
      }

      $("html:not(.legacy) table").stickyTableHeaders();
    });

  </script>

  </body>
</html>