Forked from Captain Anonymous's Pen QwPVNW.
Forked from Captain Anonymous's Pen QwPVNW.
<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> |
Forked from Captain Anonymous's Pen QwPVNW.
Forked from Captain Anonymous's Pen QwPVNW.
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; | |
} | |
} |