Skip to content

Instantly share code, notes, and snippets.

/QwPVNW.markdown

Created April 7, 2015 11:43
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Apr 7, 2015.
    7 changes: 7 additions & 0 deletions QwPVNW.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    QwPVNW
    ------


    A [Pen](http://codepen.io/anon/pen/QwPVNW) by [Captain Anonymous](http://codepen.io/anon) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/anon/pen/QwPVNW/license).
    24 changes: 24 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    <table>
    <thead>
    <tr>
    <th>Payment</th>
    <th>Issue Date</th>
    <th>Amount</th>
    <th>Period</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td data-label="Payment">Payment #1</td>
    <td data-label="Issue Date">02/01/2015</td>
    <td data-label="Amount">$2,311</td>
    <td data-label="Period">01/01/2015 - 01/31/2015</td>
    </tr>
    <tr>
    <td data-label="Payment">Payment #2</td>
    <td data-label="Issue Date">03/01/2015</td>
    <td data-label="Amount">$3,211</td>
    <td data-label="Period">02/01/2015 - 02/28/2015</td>
    </tr>
    </tbody>
    </table>
    63 changes: 63 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,63 @@
    body {
    font-family: arial;
    }

    table {
    border: 1px solid #ccc;
    width: 100%;
    margin:0;
    padding:0;
    border-collapse: collapse;
    border-spacing: 0;
    }

    table tr {
    border: 1px solid #ddd;
    padding: 5px;
    }

    table th, table td {
    padding: 10px;
    text-align: center;
    }

    table th {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    }

    @media screen and (max-width: 600px) {

    table {
    border: 0;
    }

    table thead {
    display: none;
    }

    table tr {
    margin-bottom: 10px;
    display: block;
    border-bottom: 2px solid #ddd;
    }

    table td {
    display: block;
    text-align: right;
    font-size: 13px;
    border-bottom: 1px dotted #ccc;
    }

    table td:last-child {
    border-bottom: 0;
    }

    table td:before {
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
    }
    }