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

HTML

<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>
              Choose
            <div>Thumbnails</div>
          </th>
          <th>
                         
            <div>Hilarity</div>
          </th>
          <th>
           
            <div>Nostalgia</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>timecode 1</td>
          <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
          
        </tr>
        <tr>
          <td>timecode 2</td>
          <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
          
        </tr>
        <tr>
          <td>timecode 3</td>
          <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
          
        </tr>
        <tr>
          <td>timecode 4</td>
         <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
          
        </tr>
        <tr>
          <td>timecode 5</td>
          <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
         
        </tr>
        <tr>
          <td>timecode 6</td>
          <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
         
        </tr>
        <tr>
          <td>timecode 6</td>
          <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
         
        </tr>
        <tr>
          <td>timecode 7</td>
          <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
          
        </tr>
        <tr>
          <td>timecode 8</td>
          <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
          
        </tr>
      </tbody>
    </table>
  </div>
</section>

CSS

html, body{
    font-family:Ubuntu, 'Trebuchet MS',verdana, sans-serif;
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  Xborder: 1px solid #000;
  padding-top: 37px;
  
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
    Xbackground: #1093ba;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  color: #000;
  padding: 10px 25px;
}
td{
    Xbackground: #ddd;
}
table thead{
    background: #1093ba;
}
body table th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
  background: #1093ba;
}
th div{
  position: absolute;
  background: #1093ba;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: 17px;
  
  border: 1px solid #fff;
  
}
th:first-child div{
    
}
tr {    
    text-align:center;
}

tbody tr:nth-child(odd){
    background: #ddd !important;
}
tbody tr:nth-child(odd){
    background: #fff !important;
}