align scrollable table columns with header in css

JsFiddle URL : http://ift.tt/1KLVyuM

<table cellspacing="0" cellpadding="0" border="0" width="325" >
  <tr>
    <td>
       <table cellspacing="0" cellpadding="1" border="1" width="300" >
         <tr>
            <th>Full Name</th>
            <th>Status</th>
            <th>Last reported</th>
         </tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>
       <div class ='cont' style="width:325px; height:48px; overflow:auto;">
         <table class='data' cellspacing="0" cellpadding="1" border="1" width="300"  >
           <tr>
             <td>col 1 data 1</td>
             <td>col 2 data 1</td>
             <td>col 3 data 1</td>
           </tr>
           <tr>
             <td>col 1 data 2</td>
             <td>col 2 data 2</td>
             <td>col 3 data 2</td>
           </tr>
           <tr>
             <td>col 1 data 3</td>
             <td>col 2 data 3</td>
             <td>col 3 data 3</td>
           </tr>
         </table>  
       </div>
    </td>
  </tr>
</table>

The columns are not aligned with the headers.

I want the table used for data to be aligned with the headers.

td width=100px for second table is not working.