table - yagisawatakuya/Wiki GitHub Wiki

<table>
    <caption>Statement Summary</caption>
        <thead>
        <tr>
            <th scope="col">Account</th>
            <th scope="col">Due Date</th>
            <th scope="col">Amount</th>
            <th scope="col">Period</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td scope="row" aria-label="Account">Visa - 3412</td>
            <td aria-label="Due Date">04/01/2016</td>
            <td aria-label="Amount">$1,190</td>
            <td aria-label="Period">03/01/2016 - 03/31/2016</td>
        </tr>
    </tbody>
</table>

table {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    table-layout: fixed;
    width: 100%;
}
table tr {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: .35em;
}
table th,
table td {
    padding: .625em;
    text-align: center;
}

@media screen and (max-width: 600px) {
    table thead {
        display: none;
    }
    table tr {
        border-bottom: 3px solid #ddd;
        display: block;
    }
    table td {
        border-bottom: 1px solid #ddd;
        display: block;
        text-align: right;
    }
    table td:before {
        content: attr(aria-label);
        float: left;
    }
}