A responsive table with pure CSS

A responsive table with pure CSS

Introduction

It’s no secret for any layout designer that tables are evil. They are difficult to adapt and customize. If on the desktop version of the site it is still quite easy to paint a table, then when the adaptive layout begins, everything goes to hell.

Actually, one of the most effective options is to create horizontal scrolling for the table. It’s easy to do, but today’s post is not about that. However, I will show you.

The first way to adapt

<div class="table-wrap">
<table>
<thead>
<tr>
<th>Услуга</th>
<th>Описание</th>
<th>Цена</th>
<th>Скидка</th>
</tr>
</thead>
<tbody>
<tr>
<td>Мобильная верстка</td>
<td>Верстка под телефоны</td>
<td>$3000</td>
<td>50%</td>
</tr>
<tr>
<td>Посадка на CMS WordPress</td>
<td>Создание сайта с админ. панелью</td>
<td>$3000</td>
<td>30%</td>
</tr>
</tbody>
</table>
</div>

Styling this whole thing (we mainly need to style .table-wrap).

.table-wrap {
text-align: center;
display: inline-block;
background-color: #fff;
padding: 2rem 2rem;
color: #000;
}

@media screen and (max-width: 600px) {
.table-wrap {
overflow-y: scroll;
}
}

As a result, the table will scroll up to 600 pixels wide, but the site will not. Convenient, but today I would like to talk about something else. I found another interesting approach to table responsiveness. It uses data attributes and pseudo-classes. Now I’ll show you everything.

The second way of adaptation

First, let’s change the markup:

<div class="table-wrap">
<table>
<thead>
<tr>
<th>Услуга</th>
<th>Описание</th>
<th>Цена</th>
<th>Скидка</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Услуга">Мобильная верстка</td>
<td data-label="Описание">Верстка под телефоны</td>
<td data-label="Цена">$3000</td>
<td data-label="Скидка">50%</td>
</tr>
<tr>
<td data-label="Услуга">Посадка на CMS WordPress</td>
<td data-label="Описание">Создание сайта с админ. панелью</td>
<td data-label="Цена">$3000</td>
<td data-label="Скидка">30%</td>
</tr>
</tbody>
</table>
</div>

Basically, you can do the same with js by going through all td

So, we gave each column an ​​attribute data-label, which will be useful to us in the future.

We set the basic styles:

body {
text-align: center;
padding-top: 10%;
font-family: sans-serif;
background-image: url('bg.jpg');
background-size: cover;
height: 100vh;
color: #fff;

}
.table-wrap {
text-align: center;
display: inline-block;
background-color: #fff;
padding: 2rem 2rem;
color: #000;
}

table {
border: 1px solid #ccc;
width: 100%;
margin:0;
padding:0;
border-collapse: collapse;
border-spacing: 0;
}

table tr {
border: 1px solid #ddd;
padding: 5px;
}

table th, table td {
padding: 10px;
text-align: center;
border-right: 1px solid #ddd;
}

table th {
color: #fff;
background-color: #444;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}

It looks like a regular table, of course, shifting the site by 320-420 pixels, we will see a horizontal scroll of the entire site. Not the point. How to fix it? add styles:

@media screen and (max-width: 600px) {
table {
border: 0;
}

table thead {
display: none;
}

table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}

table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
border-right: 1px solid transparent;
}

table td:last-child {
border-bottom: 0;
}

table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}

Here we made the table rows blocky, removed the column names, and right-aligned the text of the columns themselves. In turn, using the pseudo-class ::before we attach our data attributes to the left. And everything worked out. Look for an example in the foam:

As you can see, we turned the rows of the table into a small block that contains all the information. I think this table adaptability option is suitable for small tables. Use it, friends!

I hope you found it interesting to read this information. See you soon)

Leave a Reply

Your email address will not be published. Required fields are marked *