table with fixed header

by Ruchika Sharma

HTML

<div id="table_wrapper">
<div id="header">
    <div id="head1">Left</div>
    <div id="head2">Center</div>
    <div id="head3">Right Column</div>
  </div>
  <div id="tbody">
    <table>
      <tr>
        <td class="td1">1</td><td class="td2">2</td><td class="td3">3</td>
      </tr>
      <tr>
        <td class="td1">1</td><td class="td2">2</td><td class="td3">3</td>
      </tr>
      <tr>
        <td class="td1">1</td><td class="td2">2</td><td class="td3">3</td>
      </tr>
      <tr>
        <td class="td1">1</td><td class="td2">2</td><td class="td3">3</td>
      </tr>
      <tr>
        <td class="td1">1</td><td class="td2">2</td><td class="td3">3</td>
      </tr>
     
    </table>
  </div>
</div>

CSS

#table_wrapper{background:tomato;border:1px solid olive;float:left;}
  #tbody{height:80px;overflow-y:auto;width:400px;background:yellow;}
  table{border-collapse:collapse; width:100%;}
  td{padding:1px 5px; /* pixels */
      border-right:1px solid red; /* to avoid the hacks for the padding */
      border-bottom:1px solid red;} 
  .td1{width:100px;}
  .td2{width:140px;}
  .td3{border-right-width:0;} /* optional */
  #header{width:400px;background:DodgerBlue;border-bottom:1px solid red;}
  #header div{padding:1px 5px;float:left;border-right:1px solid orange;}
  #header #head1{width:100px;} /* the same as td1 */
  #header #head2{width:140px;} /* the same as td2 */
  #header #head3{float:none;border-right-width:0}