Responsive Table

by Scott Kaye

HTML

<table class="responsive">
    <tr>
        <th data-responsive-hide>Date</th>
        <th data-responsive-hide>From Account</th>
        <th data-responsive-hide>To Account</th>
        <th>Amount</th>
        <th data-responsive-hide>Edit</th>
    </tr>
    <tr>
        <td data-responsive-label="Date">Date1</td>
        <td data-responsive-label="From">From1</td>
        <td data-responsive-label="To">To1</td>
        <td>Amount1</td>
        <td>Edit1</td>
    </tr>
    <tr>
        <td data-responsive-label="Date">Date2</td>
        <td data-responsive-label="From">From2</td>
        <td data-responsive-label="To">To2</td>
        <td>Amount2</td>
        <td>Edit2</td>
    </tr>
</table>

SCSS

@mixin mobile {
	@media (max-width: 600px)  {
        @content;
    }
}

table.responsive {
    width: 100%;
	
	th, td {
		vertical-align: top;
	}
	
	th {
		font-weight: 700;
		text-transform: uppercase;
		@include mobile {
			&[data-responsive-hide] {
				display: block;
				visibility: hidden;
				font-size: 0;
			}
		}
	}
	
	td {
		&::before {
			@extend th;
		}
		
		@include mobile {
			&[data-responsive-label] {
				display: block;
				
				&::before {
					content: attr(data-responsive-label)": ";
				}
			}
		}
	}
}

th {
    text-align: left;
}