Responsive table with pure CSS

Responsive table with pure CSS

The idea here is to turn each <td> in <t> of <tbody> into one line so each <tr> will be a block. The css below will help you do that.

make like a row
1
2
3
4
5
6
7
8
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
background-color: #F8D9D5;
text-align: left;
}

Next we need to remove <thead> in mobile and convert it into a label in each <td> by using attr() method in css.

convert header to label
1
2
3
4
5
6
7
8
td:before { 
content: attr(data-label);
display: inline-block;
line-height: 1.5;
margin-left: -100%;
width: 100%;
white-space: nowrap;
}

This is a demo

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×