Category: HTML CSS Workarounds

<style type=”text/css”>
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
table-layout: fixed;
width: 100%;
}

table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}

table th,
table td {
padding: .625em;
text-align: center;
}


@media screen and (max-width: 800px) {
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

table tr {
border-bottom: 3px solid #ddd;
display: block;
}

table td {
border-bottom: 1px solid #ddd;
display: block;
text-align: right;
}

table td::before {
content: attr(data-label);
float: left;
}
}
</style>

Next the table (you only have to add percentages if you want and only to the thead – it will carry through)

<caption>
Enter Caption
</caption>
<thead>
<tr>
<th scope=”col” width=”10%”> </th>
<th scope=”col” width=”10%”>Price</th>
<th scope=”col” width=”17%”>Bed/Bath</th>
<th scope=”col” width=”17%”>SqFt</th>
<th scope=”col” width=”29%”>Address</th>
<th scope=”col” width=”17%”>MLS</th>
</tr>
</thead>

And you can add labels if you wish:

<td data-label=””>