Bootstrap Responsive Table with CSS3

imageApril 21, 2016
Follow me on:

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">

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%;

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.