Responsive Tables - Left and Right Scrolling

Responsive Tables - Left and Right Scrolling

by Nirvanachain

HTML

<table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Occuptation</th>
            <th>Specialty</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Matthew</td>
            <td>Mattman</td>
            <td>Contributor to teh Awesome</td>
            <td>Good guy to have around</td>
        </tr>
        <tr>
            <td>The</td>
            <td>Batman</td>
            <td>Superhero</td>
            <td>Catching badguys</td>
        </tr>
        <tr>
            <td>Clark</td>
            <td>Kent</td>
            <td>Reporter</td>
            <td>Saving the day</td>
        </tr>
    </tbody>
</table>

CSS

@media only screen and (min-width: 1em) {
    table, thead, tbody, th, td {
        display: block   
    }
    
    table {
        width: 100%;
        position: relative;
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    table:after, thead:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    
    thead {
        float: left;
        vertical-align: middle;
    }
    
    tbody {
        font-size: 0;
        width: auto;
        position: relative;
        overflow-x: auto;
        white-space: nowrap;  
        vertical-align: middle;      
    }
    
    tbody tr {
        font-size: 16px;
        display: inline-block;
        vertical-align: top;
        border-right: 1px solid #000000;
    }
    
    
    th {
        text-align: left;
        background-color: #efefef;
        border-top: 1px solid #000000;
        border-right: 1px solid #000000;
        border-bottom: 0;
        border-left: 1px solid #000000;
        padding: 0.5em;
    }
    th:last-child {
        border-bottom: 1px solid #000000;
    }
    
    td {
        min-height: 1.25em;
        text-align: left;
        padding: 0.5em;  
        border-top: 1px solid #000000;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        margin:0;
    }
    
    td:last-child {
        border-bottom:1px solid #000000;   
    }
    
}

@media only screen and (min-width: 600px) {
    table {
        display: table; 
        border-color: #000000;
    }
    
    thead {
        display: table-header-group;
        float: none;
    }
    
    tbody {
        display: table-row-group;
        overflow-x: initial;
    }
        
    tbody tr {
        display: table-row;   
    }
    
    th {
        display: table-cell; 
        border-top: 1px solid #000000;
        border-right: 1px solid #000000;
        border-bottom: 1px solid #000000;
       ...