Break a table row into multiple line (responsive layout)

Issue

I have a webpage that lists items. The default template uses a table for that, which i find very appropriate. In this table however, there is one column that contains much more text than the others:

While that works out on a large screen, it is very annoying to read on a small screen:

In order to use the available space better, I can only think of a fake-table layout using divs. I did a prototype, using bootstrap grid layout, that looks like a table row on large screens, but has a different layout on small and extra small screens:

While that improves the readability of the text by using the full width, I cannot use the utilities I've got for tables any more, and it breaks the user experience in subtle ways. For example, I use a nice script that enables sorting at the client. But that works only on real tables. (Also, there are small inconsistencies and visual differences between real tables and fake tables)

Is there any way that I can reformat a table row into a multi-line container similar to the one in the last image?

FYI: I am using jquery 2.1.1, Bootstrap 3.2.0.1 as GUI Framework and asp.net MVC on the server.

Bootply is here: http://www.bootply.com/pRehwTai4G

Edit: in case that did not come out clear enough: I want to keep the <tr> and <td> tags but style them similar to the divs. I do not want to replace the table with divs.

Solution

You could take a look at Responsive data tables. If that does not suit your needs, you could use JavaScript to re-create your table views as divs. This would be the easiest if you can get table data as JSON, which would be transformed into either tables or divs - depending on resolution. If you can't have it as JSON, you can always use jQuery's html() or text() to get the data from table cells and re-draw into divs.

Answered By - Maciej Gurban