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