HTML:
<table class="table-stacked">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="#">1</td>
<td data-th="First Name">Brenda</td>
<td data-th="Last Name">Bear</td>
</tr>
<tr>
<td data-th="#">2</td>
<td data-th="First Name">Frank</td>
<td data-th="Last Name">Fox</td>
</tr>
<tr>
<td data-th="#">3</td>
<td data-th="First Name">William</td>
<td data-th="Last Name">Wolf</td>
</tr>
</tbody>
</table>
CSS:
.table-stacked {
width: 100%;
}
.table-stacked thead tr {
border-bottom: 1px solid gray;
}
@media (max-width: 768px) {
.table-stacked thead {
display: none;
}
.table-stacked td {
display: flex;
border-color: gray;
}
.table-stacked td:before {
content: attr(data-th);
font-weight: bold;
width: 30%;
min-width: 80px;
padding: 10px;
padding-left: 0;
margin: -10px 10px;
margin-left: 0;
border-right: 1px solid gray;
border-width: 2px;
}
.table-stacked td:last-child {
border-bottom: 1px solid gray;
border-color: gray;
}
}