Question

I have a three column table in HTML. The cells in the third column are all of the same class.

I want the third column in each row to move to a new row under the column if the screen width is less than 750px.

So, the table would normally look like this:

<table>
 <tr>
  <td></td>
  <td></td>
  <td class="thirdcol"></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td class="thirdcol"></td>
 </tr>
</table>

If the screen width is less than 750px, I want the javascript function to make the table look like this:

<table>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td class="thirdcol"></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td class="thirdcol"></td>
 </tr>
</table>

Answer 1

Here’s a JSFiddle with a working version of it (using JQuery). Here’s the meaty part that actually does the work:

if ($(window).width() < 750) {
    $('td.thirdcol').each(function(i, item) {
        var row = $(item).clone(true).prop('colspan','2').wrapAll('<tr />');
        $(item).closest('tr').after(row);
        $(item).remove();
    });
}

However, if I were you, I wouldn’t use Javascript or tables for this and would use CSS and floating divs instead. It’s exactly the sort of thing they are designed for.