Add Responsive table to bloggers

Html code for responsive table  

<table>
  <caption>Statement Summary</caption>

<thead>
 
    <tr>
         <th scope="col">Account</th>
         <th scope="col">Due Date</th>
         <th scope="col">Amount</th>
         <th scope="col">Period</th>
   </tr>
   
</thead>

 
<tbody>


     <tr>
       <td data-label="Account">Visa - 3412</td>
       <td data-label="Due Date">04/01/2016</td>
       <td data-label="Amount">$1,190</td>
       <td data-label="Period">03/01/2016 - 03/31/2016</td>
     </tr>

    <tr>
      <td scope="row" data-label="Account">Visa - 6076</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$2,443</td>
      <td data-label="Period">02/01/2016 - 02/29/2016</td>
    </tr>

    <tr>
      <td scope="row" data-label="Account">Corporate AMEX</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$1,181</td>
      <td data-label="Period">02/01/2016 - 02/29/2016</td>
    </tr>

    <tr>
      <td scope="row" data-label="Acount">Visa - 3412</td>
      <td data-label="Due Date">02/01/2016</td>
      <td data-label="Amount">$842</td>
      <td data-label="Period">01/01/2016 - 01/31/2016</td>
    </tr>

</tbody>

</table>

Css code for responsive Table :

<style type='text/css'>

/* Table
*************************************************/
table {border: 1px solid #eee;border-collapse: collapse;margin: 0;padding: 0;width: 100%;color:#555;}
table caption {font-size: 1.5em;margin: .25em 0 .75em;}
table tr {background: #eee;border: 1px solid #ccc;padding: .35em;}
table th,table td {padding: .625em;text-align: center;border-right:1px solid #ccc;}
table th {font-size: .85em;letter-spacing: .1em;text-transform: uppercase;background: #ddd;}
table td img {text-align: center;}
@media screen and (max-width: 600px) {
.post table {border: 0;}
.post table caption {font-size: 1.3em;}
.post table thead {display: none;}
.post table tr {border-bottom: 3px solid #ccc;display: block;margin-bottom: .725em;}
.post table td {border-bottom: 1px solid #ccc;display: block;font-size: .8em;text-align: right;border-right:1px solid #ccc;}
.post table td:before {content: attr(data-label);float: left;font-weight: bold;text-transform: uppercase;}
.post table td:last-child {border-bottom: 0;}

}
</style>