Responsive Design en una Tabla

[alvaaz]

Saludos estimados, gracias por poder tener este sitio para ayudar.

Tengo una duda sobre diseño flexible en una tabla, tengo este resultado, la tabla es Dirección, Correo, Teléfono y sus respectivos datos.



Pero quiero tener este resultado al estar a menos de 480px.



* El estilo de letra no importa, sólo me interesa la estructura.

Sin embargo tengo este resultado al achicar la pantalla.



Les adjunto el archivo HTML que hice:

Código HTML:

<table>
 
<thead>
<tr>
 
<th>Dirección</th>
<td class="separacion"></td>
<th>Correo</th>
<td class="separacion"></td>
<th>Teléfono</th>
 
</tr>
</thead>
 
<tbody>
 
<tr>
 
<td>Av. Borgoño 14580, Local 6, Reñaca, Viña del Mar </td>
<td class="separacion"></td>
<td>[email protected]</td>
<td class="separacion"></td>
<td>[phone]</td>
 
</tr>
 
</tbody>
 
</table>
 

Y también el CSS

Código CSS:

table {
    margin:  40px auto;
}
 
.separacion {
    width: 50px;
}
 
table th tr td {
    
    text-align: center;
    
}
 
table th {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 12pt;
    color: #ead561;
    
}
 
table tr td {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: 12pt;
    color: #f4e2d4;
}