Bootstrap Responsive Table with CSS3

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 .