Geta

Meny NO

Responsive Table

Whenever you need to represent data on the website in table format question about responsiveness and page look & feel on smaller devices.

Plugin is based on stacktable.js by John Polacek for transforming tables from column-based into row-based on smaller devices. This blog post is about how to adapt and automate a bit solution to fit for tables created by EPiServer tinyMCE editor.

Even if we specify that table has header and body:

Markup structure for table is following:

<table border="0">
<thead>
<tr>
<td>Name</td>
<td>1st Year</td>
<td>2nd Year</td>
<td>3rd Year</td>
<td>4th Year</td>
<td>5th Year</td>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
<td>1990</td>
<td>1995</td>
<td>1999</td>
<td>2001</td>
...

So you can see that table has only thead element without proper th elements. That's actually is not a problem at all.

More info

More info on author blog post: http://tech-fellow.net/2014/03/06/responsive-episerver-tables/