Dynamically converting a table, table row (tr), or table cell (td) to be div-based may seem difficult, but it’s surprisingly simple, if you have a div in each cell containing all its content.

Rather than replacing the table, tr or td tags with div, you can use jQuery to create an element after the table, then fill it with the content of the table cells.

For instance, say I have the following:

<table class="productTable ">
  <tbody>
    <tr>
      <td class="productItem">
        <div class="product_item">
         Product 1
        </div>
      </td>
      <td class="productItem">
        <div class="product_item">
         Product 2
        </div>
      </td>
    </tr>
  </tbody>
</table>

After including jQuery, I can call the following function:

$(".productTable").after("<div id='product-container'></div>");
$(".productTable .product_item").appendTo("#product-container").each(function() {});
$('.productTable').remove();

The div under td (.product_item) is moved to the newly created div#product-container and the original table is removed.