Ionic Framework responsive table with data attribute not working as expected

ionic-v1
1

I am trying to achieve a responsive table for mobile using ionic framework. I am using the example from here (codepen) as of the codes below too

HTML

<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>

CSS

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;
    }
}

I have tested this example previously using Onsen Hybrid Framework and also on a normal website, when the max-width of the browser or the mobile screen is below 600px, it will should be as the picture below

image

but what really happened with mine when using ionicframework is as below which are not aligned as it should be

image

The code used is exactly the same for both pictures with the codepen link given above. Am I missing something here which made it like this?

Note: If ever there is an alternative to this problem, i don’t mind converting if it works.