Tables are a nice way to organize a lot of data. We provide a few utility classes to help you style your table as easily as possible. Also, to improve mobile experience, all tables on mobile-screen widths are centered automatically. Responsive design is all about adjusting designs to accommodate screens of different sizes. This table is great for displaying large sets of information, there is no JS code, only CSS. It's very clear, minimalistic.
I will create a simple responsive table to demonstrate how it looks on a mobile device:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta charset="UTF-8" />
<link rel="stylesheet" href=".css/htmltable.css" />
</head>
<body></body>
</html>
This is a skeleton of standard HTML structure, we will add table markup.
<div class="table-responsive">
<table class="responsive-table table-bordered ">
<thead>
<tr>
<th scope="col">By Year</th>
<th scope="col">TEAM</th>
<th scope="col">GP</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">2017-18</th>
<td data-title="Team">GSW</td>
<td data-title="GP">6.1</td>
</tr>
<tr>
<th scope="row">2016-17</th>
<td data-title="Team">GSW</td>
<td data-title="GP">6.1</td>
</tr>
<tr>
<th scope="row">2015-16</th>
<td data-title="Team">GSW</td>
<td data-title="GP">6.1</td>
</tr>
</tbody>
</table>
</div>
Adding CSS
Now we will add are CSS to style is a table. This is a very simple styling just for showcase.
<!-- htmltable.css -- > .table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.table {
max-width: 100%;
}
.table-bordered,
.table-bordered td,
.table-bordered th {
border: 1px solid #f2f2f2;
}
.responsive-table {
width: 100%;
margin-bottom: 1.5em;
}
.responsive-table thead {
position: absolute;
clip: rect(1px 1px 1px 1px);
/* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
.responsive-table thead th {
background-color: #3f51b5;
border-bottom-width: 1px;
vertical-align: bottom;
font-size: 13px;
padding: 1rem 1.5rem;
border-bottom: 2px solid #f2f2f2;
font-weight: normal;
text-align: left;
color: white;
}
.responsive-table thead th:first-of-type {
text-align: left;
}
.responsive-table tbody,
.responsive-table tr,
.responsive-table th,
.responsive-table td {
display: block;
padding: 0;
text-align: left;
white-space: normal;
}
.responsive-table th,
.responsive-table td {
padding: 1rem 1.5rem;
vertical-align: top;
}
.responsive-table caption {
margin-bottom: 1em;
font-size: 1em;
font-weight: bold;
text-align: center;
}
.responsive-table tfoot {
font-size: 0.8em;
font-style: italic;
}
.responsive-table tbody tr {
margin-bottom: 1em;
border: 2px solid #3f51b5;
}
.responsive-table tbody tr:last-of-type {
margin-bottom: 0;
}
.responsive-table tbody th[scope="row"] {
background-color: #3f51b5;
color: white;
}
.responsive-table tbody td[data-type="currency"] {
text-align: right;
}
.responsive-table tbody td[data-title]:before {
content: attr(data-title);
float: left;
font-size: 1em;
color: rgba(94, 93, 82, 0.75);
}
.responsive-table tbody td {
text-align: right;
}
Next, we have to add CSS @media queries to make our table responsive:
<!-- htmltable.css -- > @media (min-width: 75em) {
.responsive-table th,
.responsive-table td {
padding: 0.75em;
}
}
@media (min-width: 62em) {
.responsive-table {
font-size: 1em;
}
.responsive-table th,
.responsive-table td {
padding: 0.75em 0.5em;
}
.responsive-table tfoot {
font-size: 0.9em;
}
}
@media (min-width: 52em) {
.responsive-table {
font-size: 0.9em;
}
.responsive-table thead {
position: relative;
clip: auto;
height: auto;
width: auto;
overflow: auto;
}
.responsive-table tr {
display: table-row;
}
.responsive-table th,
.responsive-table td {
display: table-cell;
padding: 1em;
}
.responsive-table caption {
font-size: 1.5em;
}
.responsive-table tbody {
display: table-row-group;
}
.responsive-table tbody tr {
display: table-row;
border-width: 1px;
}
.responsive-table tbody tr:nth-of-type(even) {
background-color: rgba(255, 255, 255, 0.1);
}
.responsive-table tbody th[scope="row"] {
background-color: transparent;
padding: 1rem 1.5rem;
font-weight: 400;
vertical-align: top;
color: #707070;
text-align: left;
}
.responsive-table tbody td {
text-align: left;
}
.responsive-table tbody td[data-title]:before {
content: none;
}
}
This is just one potential solution to the problem of data tables on small screens. There are likely some fancy JavaScript solutions that could approach things differently and also work great.
Have a nice day!
Top comments (0)