HTML CSS Responsive Table & CSS Before - html

Question

My aim is to create responsive tables design that look good when viewing on mobiles (width under 480px).
I have the following markup for my table:
<table class="table eventlist">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Duration</th>
<th>Location</th>
<th>Cost</th>
</tr>
</thead>
<tr>
<td data-title="Code">AAC</td>
<td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
<td data-title="Price" class="numeric">$1.38</td>
<td data-title="Change" class="numeric">-0.01</td>
<td data-title="Change %" class="numeric">-0.36%</td>
<td data-title="Open" class="numeric">$1.39</td>
</tr>
</table>
And the following CSS:
/* Landscape phones and down */
#media (max-width: 480px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
display:none;
}
tr {
border: 1px solid #ccc;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:right;
}
td:before {
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
td:before {
content: attr(data-title);
}
}
My table ends up looking like this:
Would you say this is a good user friendly responsive design?
How can I edit the line:
td:before {
content: attr(data-title);
}
So that it reads the <th> for the column?
Here is a live example: JS Fiddle

Answer 1

Re: Would you say this is a good user friendly responsive design?
The layout of it looks great for a single symbol, and still looks quite good for multiple rows when not in "mobile-mode", however if you plan on having multiple quotes, I think it's going to wind up looking quite cluttered on small screens. You might consider removing the borders between rows and only having lines between quotes to keep it visually cleaner.
Just my .02 from a design perspective.