Edit in JSFiddle

JavaScript
HTML
CSS
Result

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

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
  <body>
    <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>
  </body>
</html>

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
}
#product-container { 
    background:#FAFAFA;
    border:1px solid #e4e4e4;
    margin:0; 
    padding:0;
}
div.product_item {
    border-bottom:1px dotted #CCC;
    padding:5px;
}
#product-container div:last-child { 
    border:0; 
}