<div class = 'wrapper'>
  <table class = 'table'>
   <colgroup>
    <col class = 'col-1'>
    <col class = 'col-2'>
    <col class = 'col-3'>
    <col class = 'col-4'>
   </colgroup>
   
   <thead>
     <tr>
       <th>Title1</th>
       <th>Title2</th>
       <th>Title3</th>
       <th>Title4</th>
     </tr>
   </thead>
   
   
   <tbody>
     <tr>
       <td>1Title1</td>
       <td>Title2</td>
       <td>Title3</td>
       <td>Title4</td>
     </tr>
    <tr>
       <td>Title1</td>
       <td>Title2</td>
       <td>Title3</td>
       <td>Title4</td>
     </tr>
    <tr>
       <td>Title1</td>
       <td>Title2</td>
       <td>Title3</td>
       <td>Title4</td>
     </tr>
    <tr>
       <td>Title1</td>
       <td>Title2</td>
       <td>Title3</td>
       <td>Title4</td>
     </tr>
    <tr>
       <td>Title1</td>
       <td>Title2</td>
       <td>Title3</td>
       <td>Title4</td>
     </tr>
    <tr>
       <td>Title1</td>
       <td>Title2</td>
       <td>Title3</td>
       <td>Title4</td>
     </tr>
        <tr>
       <td>Title1</td>
       <td>Title2</td>
       <td>Title3</td>
       <td>Title4</td>
     </tr>

   </tbody>
   <tfoot>
    <tr>
      <td colspan='4'>FOOTER</td>
    </tr>
   <tfoot>
 </table>
</div>

.wrapper {
  max-width: 400px;
  height: 250px;
 border: 2px solid green;
}

.table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
}

.col-2 { width: 70px; }
.col-3 { width: 70px; }
.col-4 { width: 70px; }

tr { height: 40px; }

th, td { border: 1px solid black; }

tfoot {
 text-align: center;
 font-weight: bold;
}