html - Table thead and first tbody column stays fixed in scrollable div -

i'm trying make fixed table fields in scrollable div.

html part:

<div class="scroll">     <table>         <thead>             <tr>                 <td>title #1</td>                 <td class="second">title #2</td>             </tr>         </thead>          <tbody>             <tr>                 <td>name #1</td>                 <td>description</td>             </tr>             <tr>                 <td>name #2</td>                 <td>description</td>             </tr>         </tbody>     </table> </div> 

css part:

table {      width: auto; }  table > thead > tr > td {      min-width: 100px;     max-width: 100px;      padding: 10px 20px;     border-right: 1px solid #666666;     background-color: #cccccc; }  table > thead > tr > td.second {      min-width: 300px;     max-width: 300px; }  table > tbody > tr > td {      padding: 30px 0; }  div.scroll {      max-width: 400px;     max-height: 200px;     overflow: auto; } 

where div.scroll have max-height , max-width set lower sizes table. please see fiddle example.

live example:

red part should stay @ top when scrolling vertically, should move when scrolling horizontally, , blue part should move when scrolling vertically, should stay @ left when scrolling horizontally.

question:

is there easy way of doing this? or best way of doing this..?

http://jsfiddle.net/hmvxf/1/ please check update of code

made few changes

<div class="fixed">      <table>         <thead>             <tr>                 <td>                     title #1                 </td>                 <td class="second">                     title #2                 </td>             </tr>         </thead>     </table> </div>