Scroll table

by Олексій Рачок

HTML

<div class="scrollableContainer">
  <div class="scrollingArea">
  	<table class="cruises scrollable">
  	  <thead>
  			<tr>
  	      <th class="name"><div>Name</div></th>
  	      <th class="operator"><div>Operator</div></th>
  	      <th class="began"><div>Began operation</div></th>
  	      <th class="tonnage"><div>Tonnage</div></th>
  	      <th class="status"><div>Status</div></th>
  			</tr>
  		</thead>
  		<tbody>
  		  		  <tr>
          <td class="name"><div>Seabourne Sun</div></td>
          <td class="operator"><div>Seabourn Cruise Line</div></td>
          <td class="began"><div>1988</div></td>
          <td class="tonnage"><div></div></td>
          <td class="status"><div >Ended service in 2002, currently operating as Prinsendam</div></td>                        
        </tr>
        		  <tr>
          <td class="name"><div>Adventures of the Seas</div></td>
          <td class="operator"><div>Royal Caribbean International</div></td>
          <td class="began"><div>2001</div></td>
          <td class="tonnage"><div>138,000</div></td>
          <td class="status"><div >Operating</div></td>                        
        </tr>
        		  <tr>
          <td class="name"><div>Oceanic Independence</div></td>
          <td class="operator"><div>American Hawaiian Cruises / American Global Line</div></td>
          <td class="began"><div>1974</div></td>
          <td class="tonnage"><div>23,719</div></td>
          <td class="status"><div >Named formerly (1951-1974) and subsequently renamed (1982-2006) the Independence, renamed the Oceanic (2006), sold for scrap in 2008 but remains in mothballs</div></td>                        
        </tr>
        		  <tr>
          <td class="name"><div>Cunard Ambassador</div></td>
          <td class="operator"><div>Cunard Line</div></td>
          <td class="began"><div>1972</div></td>
          <td class="tonnage"><div>14,160</div></td>
          <td class="status"><div >Burnt 1974, rebuilt into a livestock...

CSS

* { padding: 0; margin: 0; }
  table.cruises { 
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    cellspacing: 0; 
    border-collapse: collapse; 
    width: 535px;    
    }
  table.cruises td { 
    border-left: 1px solid #999; 
    border-top: 1px solid #999;  
    padding: 2px 4px;
    }
  table.cruises tr:first-child td {
    border-top: none;
  }
  table.cruises th { 
    border-left: 1px solid #999; 
    padding: 2px 4px;
    background: #6b6164;
    color: white;
    font-variant: small-caps;
    }
  table.cruises td { background: #eee; overflow: hidden; }
  
  div.scrollableContainer { 
    position: relative; 
    width: 592px; 
    padding-top: 2em; 
    margin: 40px;    
    border: 1px solid #999;
    background: #6b6164;
    }
  div.scrollingArea { 
    height: 240px; 
    overflow: auto; 
    }

  table.scrollable thead tr {
    left: -1px; top: 0;
    position: absolute;
    }

  table.cruises .name     div { width: 108px; }
  table.cruises .operator div { width: 126px; }
  table.cruises .began    div { width: 76px;  text-align:center; }
  table.cruises .tonnage  div { width: 60px;  text-align:center; }
  table.cruises .status   div { width: 160px; }
  
  table.cruises td.operator { background: #ebcb4d; }
  table.cruises td.tonnage  { background: white; }
  table.cruises td.name     { background: #C7E0C1; }  
  table.cruises td.began    { background: #B7C3E8; }

JavaScript

$(document).ready(function() {
    $(".scrollingArea").height( $(window).height()-100 );
    $(window).resize(function() { $(".scrollingArea").height( $(window).height()-100 ); } );
  });