Responsive HTML Tables
Simple responsive table
Add horizontal scrollbar
1
2
3
4
5
6
7
table {
width: 100%;
}
.table-container {
max-width: 100%;
overflow-x: scroll;
}
Horizontal tables using data attributes
Hide the table row and add the data-cell value before the table cell
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@media (max-width: 650px) {
th {
display: none;
}
td {
display: block;
padding: 0.5rem 1rem;
}
td::before {
content: attr(data-cell) " : "
font-weight: 700;
text-transform: capitalize;
}
}
This post is licensed under CC BY 4.0 by the author.