responsive-tables

responsive-table

<style>
table {
    width:100%;
}
@media (max-width: 500px) {
    table tr th {
        float:left;
        width:50%;
        clear:left;
    }
    table tr td {
        width:50%;
        float:left;
    }
    table thead {
        display: none;
    }
}
@media (min-width: 501px) {
    table tbody tr th {
        display: none;
    }
}
</style>

<table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>First Name</th>
            <td>James</td>
            <th>Last Name</th>
            <td>Matman</td>
            <th>Job Title</th>
            <td>Chief Sandwich Eater</td>
        </tr>
        <tr>
            <th>First Name</th>
            <td>The</td>
            <th>Last Name</th>
            <td>Tick</td>
            <th>Job Title</th>
            <td>Crimefighter Sorta</td>
        </tr>
        <tr>
            <th>First Name</th>
            <td>Jokey</td>
            <th>Last Name</th>
            <td>Smurf</td>
            <th>Job Title</th>
            <td>Giving Exploding Presents</td>
        </tr>
        <tr>
            <th>First Name</th>
            <td>Cindy</td>
            <th>Last Name</th>
            <td>Beyler</td>
            <th>Job Title</th>
            <td>Sales Representative</td>
        </tr>
        <tr>
            <th>First Name</th>
            <td>Captain</td>
            <th>Last Name</th>
            <td>Cool</td>
            <th>Job Title</th>
            <td>Tree Crusher</td>
        </tr>
    </tbody>
</table>