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-responsivelike 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.

Tags:[ html  css  table  responsive-table  ]
Do you need help?

Contact me