This is something I've already added to the BaseWeb docs. It should be added to core. Here's the example on a rowed table:
@include media-max('small') {
.table-social {
tr, th, td {
display: block;
}
tr {
padding: map-get($tables, 'padding');
border-bottom: map-get($tables, 'border');
&:first-child {
border-top: map-get($tables, 'border');
}
}
tr {
th,
td {
padding: 0.5rem 0;
border-bottom: 1px dotted rgba($black, 0.1);
}
}
tr {
th:last-child,
td:last-child {
border-bottom: 0 none;
}
}
tbody:first-child tr:first-child {
th,
td {
border-top: 0 none;
}
}
}
}
This is something I've already added to the BaseWeb docs. It should be added to core. Here's the example on a rowed table: