Tabla Responsive modelo 2 html y css

Ver  tambien : Tabla Responsive modelo 1 html y css

Estructura de la tabla HTML

1) Vamos a crear  la clase responsivegene y lo asociamos a la tabla 

2) Utilizaremos el  atributo data-label  a   cada "td"  

<table class="responsivegene">
  <thead>
    <tr>
      <th>Payment</th>
      <th>Issue Date</th>
      <th>Amount</th>
      <th>Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Payment">Payment #1</td>
      <td data-label="Issue Date">02/01/2015</td>
      <td data-label="Amount">$2,311</td>
      <td data-label="Period">01/01/2015 - 01/31/2015</td>
    </tr>
    <tr>
      <td data-label="Payment">Payment #2</td>
      <td data-label="Issue Date">03/01/2015</td>
      <td data-label="Amount">$3,211</td>
      <td data-label="Period">02/01/2015 - 02/28/2015</td>
    </tr>
  </tbody>
</table>

Creamos los estilos para la tabla responsive

table.responsivegene {border: 1px solid #ccc;width: 100%;margin:0;padding:0;border-collapse: collapse;border-spacing: 0; }
table.responsivegene tr {border: 1px solid #ddd;padding: 5px; }
table.responsivegene th, table td { padding: 10px;text-align: center;}
table.responsivegene th {text-transform: uppercase;font-size: 14px;letter-spacing: 1px;}

@media screen and (max-width: 600px) {
    table.responsivegene {border: 0;}
    table.responsivegene thead {display: none;}
    table.responsivegene tr {margin-bottom: 10px;display: block;border-bottom: 2px solid #ddd;}
    table.responsivegene td {display: block;text-align: right;font-size: 13px;border-bottom: 1px dotted #ccc;}
    table.responsivegene td:last-child { border-bottom: 0;}
    table.responsivegene td:before {content: attr(data-label);float: left;text-transform: uppercase;font-weight: bold;}
  }

Resultado Final