Break a table row into multiple line (responsive layout)

You can do this purely with a couple of lines of css...

    @media all and (max-width:768px) {
        .calculator tr {    display: table;  width:100%;    }               
        .calculator td {    display: table-row; }           
    }

.calculator is the class used for the table:

<table class="calculator">

I use this to quickly alter the table that I use for calculator inputs for smarter looking design when viewing between mobile/desktop: live example here though the difference is best viewed by a mobile device and desktop along side each other (not all my mobile scripts are delived to the desktop browser so the overall design may look odd if you purely view through a desktop browser and minimise but the cells will become rows etc. to illustrate).

In addition you could add a span / label etc within the cell and makes this

display:table-cell;

and make the table a block if you prefer, this approach is much more lightweight and stops the necessity to use javascript.

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.