<table class="main-table mobile-optimised">
<thead>
<tr>
<th>Product Name:</th>
<th>SKU</th>
<th>Resolution</th>
<th>Requested Qty</th>
<th data-th="Qty">Qty</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<!--This part may get repeated-->
<tr>
<td data-th="Product Name:"><h3 class="table-heading">Black Child Angel Figurine Singing</h3>
<dl class="item-options">
<dt>Color</dt>
<dd>Red</dd>
</dl></td>
<td data-th="SKU">SKU</td>
<td data-th="Resolution">Store Credit</td>
<td data-th="Requested Qty" class="numbers"> 1 </td>
<td data-th="Qty" class="numbers"> 1 </td>
<td data-th="Status">Pending </td>
</tr>
<!--This part may get repeated-->
<!--This part may get repeated-->
<tr>
<td data-th="Product Name:"><h3 class="table-heading">Black Child Angel Figurine Singing</h3>
<dl class="item-options">
<dt>Color</dt>
<dd>Red</dd>
</dl></td>
<td data-th="SKU">SKU</td>
<td data-th="Resolution">Store Credit</td>
<td data-th="Requested Qty" class="numbers"> 1 </td>
<td data-th="Qty" class="numbers"> 1 </td>
<td data-th="Status">Pending </td>
</tr>
<!--This part may get repeated-->
<!--This part may get repeated-->
<tr>
<td data-th="Product Name:"><h3 class="table-heading">Black Child Angel Figurine Singing</h3>
<dl class="item-options">
<dt>Color</dt>
<dd>Red</dd>
</dl></td>
<td data-th="SKU">SKU</td>
<td data-th="Resolution">Store Credit</td>
<td data-th="Requested Qty" class="numbers"> 1 </td>
<td data-th="Qty" class="numbers"> 1 </td>
<td data-th="Status">Pending </td>
</tr>
<!--This part may get repeated-->
</tbody>
</table>
.main-table {
width: 100%;
max-width: 980px;
/* change to suit*/
margin: auto;
border: 1px solid #eaeaea;
border-collapse: collapse;
}
.main-table thead th {
background: #800080;
color: #fff;
color: #fff;
font-size: 0.8rem;
padding: 5px 9px 6px 9px;
line-height: 1;
}
.main-table th,
.main-table td {
vertical-align: top;
text-align: left;
}
td.numbers {
text-align: center;
}
.main-table td {
font-size: 0.7rem;
padding: 3px 9px;
border-bottom: 1px solid #999; /* dotted borders look bad on tables*/
line-height: 1.2;
}
.table-heading {
font-size: 0.7rem;
margin: 0 0 0.5em;
}
.item-options {
margin: 0 0 0.5rem;
overflow: hidden;
clear: both;
}
.item-options dt {
margin: 0;
font-weight: bold;
}
.item-options dt,
.item-options dd {
display: inline-block;
margin: 0;
padding: 0 5px 0 0;
vertical-align: top;
}
.item-options dt:after {
content: ":";
}
.main-table tbody tr:nth-child(odd) td {
background: #f9f9f9;
}
@media screen and (max-width: 540px) {
table.mobile-optimised {
word-wrap: break-word;
font-size: 1rem;
border: none;
}
table.mobile-optimised thead {
display: none;
}
table.mobile-optimised td {
display: block;
float: left; /* ie9 and under hack */
width: 100%;
clear: both;
background: #eee;
border: none;
padding: 10px 5px;
box-sizing: border-box;
font-size: 1rem;
}
table.mobile-optimised tbody,
table.mobile-optimised tr {
display: block;
}
.mobile-optimised td:before {
content: attr(data-th);
display: block;
font-weight: bold;
margin: 0 0 2px;
background: #800080;
color: #fff;
padding: 5px;
}
.mobile-optimised tbody tr {
border-bottom: 1px solid #000;
overflow: hidden;
}
.item-options,
.table-heading {
font-size: 1rem;
}
.mobile-optimised .numbers {
text-align: left;
}
.main-table tbody tr:nth-child(odd) td {
background: #ccc;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.