I spent some time playing with the Bootstrap Responsive Table . I was very curious about on how can I create a responsive table with just CSS code without any interaction of Javascript code. I found that nearly impossible to make it happens until I learned about the attribute attr() function on CSS. I am using Bootstrap Framework a lot on my web project but I can say that the Bootstrap responsive table component is not so good for using it on mobile and tablet device even on a responsive website.
Using Bootstrap Responsive Table
You can create a responsive tables with Bootstrap by wrapping any in .table-responsive like the below example:
<div class="table-responsive">
...
</div>
On small screen under 768px you will notice that appearing a scroll horizontally and whilst on larger screen than 768px wide, you will not see any difference in these tables. The result has as following:
Reads Value With attr() CSS Property
attr() CSS property allows us to retrieve the value of an attribute of the selected element and use it in the style sheet. I set an attribute on the td element of the table and then using the content property and attribute attr() function for reading the content of the element.
[row-header]:before {
content: attr(row-header);
display: inline-block;
vertical-align: middle;
text-align: left;
width: 50%;
padding-right:30px;
}
Below you can see the Unresponsive Table, Responsive Table with Bootstrap and Responsive Table with Custom Style code:
See the Pen Bootstrap Responsive Table by Andreas Eracleous ( @Sp00ky ) on CodePen .