HTML table pure CSS fixed header

This is a, slightly hackish, pure CSS implementation of a fixed table header. It is implemented in HTML5 and CSS3 and is tested in FX 25, Chrome 31 and IE 10.

by Jens Kühn

HTML

<section class="">
  <div class="container">
    <table class="fixedHeaderTable">
      <tbody>
        <tr>
          <td>
            <div>Table attribute name</div>
          </td>
          <td>
            <div>Value</div>
          </td>
          <td>
            <div>Description</div>
          </td>
        </tr>
        <tr>
          <td>1align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
        </tr>
        <tr>
          <td>bgcolor</td>
          <td>rgb(x,x,x), #xxxxxx, colorname</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
        </tr>
        <tr>
          <td>border</td>
          <td>1,""</td>
          <td>Specifies whether the table cells should have borders or not</td>
        </tr>
        <tr>
          <td>cellpadding</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
        </tr>
        <tr>
          <td>cellspacing</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between cells</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
          <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
        </tr>
        <tr>
          <td>rules</td>
          <td>none, groups, rows, cols, all</td>
          <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
        </tr>
        <tr>
          <td>summary</td>
          <td>text</td>
          <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
        </tr>
        <tr>
          <td>width</td>
          <td>pixels, %</td>
          <td>Not supported in HTML5....

CSS

html, body{
  margin:0;
  padding:0;
  height:100%;
}
.container {
    position: static;
  overflow: scroll;
  height: 200px;
}
.fixedHeaderTable {
    position: static;
}
.fixedHeaderTable tr:first-child td {
    vertical-align: top;
    text-align: left;
    color: red;
    white-space: nowrap;
    padding: 0px 10px;
}
.fixedHeaderTable tr:first-child td div{
    position: absolute;
    font-weight: bold;
    white-space: nowrap;
    padding: 0px;
    color: #000;
    line-height: normal;
    width: 100%;
    background: #0ff;
    margin: -18px 0px 0px -10px;
}

JavaScript

$('.fixedHeaderTable tbody tr:first-child td').each(function(i,v){
    $(v).find('div').each(function(ii,vv){
        $(v).html($(vv).html()+$(v).html());
    })
})