[Veo que ya resolviste tu problema, igual, aquí esta una tabla un poquito mas compleja y que puede que te pueda servir un poco mas; lo mejor es que no usa ni js ni jquery, puro css puro y duro. El único problema es que tienes que agregar manualmente "td:nth-of-type(n_columna):before { content: "title_columna"; }" por cada una de las columnas. pero amenos que tu tabla aumente de columnas automáticamente, esta tabla es genial por donde la mires.
Index.html
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@charset "UTF-8";
/* CSS Document */
.inmodal-table{
width:100%;
}
@media screen and (max-width:720px){
table, thead, tr, th, tbody, td{
display:block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
td:nth-of-type(1):before { content: "Nombre"; }
td:nth-of-type(2):before { content: "Edad"; }
td:nth-of-type(3):before { content: "Sexo"; }
td:nth-of-type(4):before { content: "Ciudad"; }
}
</style>
<title>Documento sin título</title>
</head>
<body>
<table class="tabla">
<thead>
<tr>
<th>nombre</th>
<th>edad</th>
<th>sexo</th>
<th>ciudad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pedro</td>
<td>20</td>
<td>M</td>
<td>Merida, Yucatan</td>
</tr>
<tr>
<td>Carmen</td>
<td>20</td>
<td>F</td>
<td>Morelia, Michoacan</td>
</tr>
<tr>
<td>Juan</td>
<td>25</td>
<td>M</td>
<td>Guadalajara, Jalisco</td>
</tr>
</tbody>
</table>
</body></html> Saludos!