title: How to make an HTML table (with thead, tbody, tfoot) printable with page-break?
body: <p>I'm working on a JAVA EE project. <br/></p>
  
  <p>I have an HTML page (JSF 2 based) where I display a search resultlist using a PRIMEFACES Framework datatable. The datatable is very large (more than 30 colums sometimes) so I made it horizontally scrollable. My purpose is to make this datatable printable so I can have by example 10 or 15 columns on each page depending on the columns' widths..</p>
  
  <p>The PRIMEFACES PRINTER doesn't do what I need.</p>
  
  <p>When I try a "window.print()", It only prints the visible part of the datatable on the screen. When I decrease the font-size to 8 or lower, it prints all the datatable content on ONE page (a good point) but the result is not readable.</p>
  
  <p>I also tried using CSS properties (page-break-before, page-break-inside &amp; page-break-after) and javascript (JQuery) but they don't work. (I'm not very good at javascript). </p>
  
  <p>The HTML output of the PRIMEFACES "datatable" is a "table" with only ONE "tr" inside the "thead" and the "tbody". There are many "th" inside the "tr" of the "thead" and so many "td" inside the "tr" of the "tbody" and I think that's why I'm not able to do what I expect.</p>
  
  <p>Here is the output of the PRIMEFACES datatable I use (I made it simple) :</p>
  
  <p>NB : I can't change the datatable structure because it depends on the PRIMEFACES Framework Datatable. I use Primefaces 5.0 and the latest Google Chrome version as my browser.</p>
  
  <p>I have already lost 2 weeks searching for a solution.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//***********************************************************************
  //***********************************************************************
  // Javascript CODE for printing purpose
  //***********************************************************************
  //***********************************************************************
  
  function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   document.body.innerHTML = printContents;
   window.print();
   document.body.innerHTML = originalContents;
  }
  
  // ***********************************************************************
  
  function printout(divName) {
   var data = document.getElementById(divName).innerHTML;
   var newWindow = window.open(null, '', 'height=1000,width=1600');
   newWindow.document.open("text/html");
   newWindow.document
        .write('&lt;style&gt;@media print {@page{size:landscape;} 
           .page-break { display: block; page-break-before: always; 
           page-break-inside: avoid; page-break-after: auto; overflow: 
           visible; } thead { display: table-header-group; } 
           tfoot { display: table-footer-group;} 
           body {font-size: 12px; line-height: 1.2;}}
       &lt;/style&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;');
   newWindow.document.write('&lt;/head&gt;&lt;body &gt;');
   newWindow.document.write(data);
   newWindow.document.write('&lt;/body&gt;&lt;/html&gt;');
   newWindow.document.close();
   newWindow.print();
  }
  
  // ***********************************************************************
  
  function printAll2(divName) {
   var colCount = 0;
   $('#' + divName + ' &gt; thead &gt; tr &gt; th').each(function() {
    colCount++;
   });
  
   // var colCount = 0;
   // $('tr:nth-child(1) td').each(function() {
   // colCount++;
   // });
   alert("Ce tableau a : " + colCount + " colonnes !!!");
  
   /*var table = $("#" + divName);*/
   var table = $("#XXX");
   var tableWidth = table.outerWidth();
  
   alert('000- tableWidth = ' + tableWidth);
  
   var pageWidth = 1400;
   var pageCount = Math.ceil(tableWidth / pageWidth);
   var printWrap = $("&lt;div&gt;&lt;/div&gt;").insertAfter(table);
   var i;
   var printPage;
  
   for (i = 0; i &lt; pageCount; i++) {
    printPage = $(
     "&lt;table&gt;&lt;/table&gt;&lt;br/&gt;")
     .css({
      "overflow" : "hidden",
      "width" : pageWidth,
      "display" : "block",
      "page-break-before" : "always",
     // "page-break-before" : i === 0 ? "auto" : "always",
      "page-break-inside" : "avoid",
      "page-break-after" : "always",
      "-webkit-region-break-inside" : "avoid"
      //
      // thead {
      // "display": "table-header-group"
      // },
      // tfoot {
      // "display": "table-footer-group"
      // }
  
      }).appendTo(printWrap);
  
    table.clone().removeAttr("id").appendTo(printPage).css({
     "position" : "relative",
     "left" : -i * pageWidth,
    });
   }
  
   // alert('1- ' + document.getElementById(divName).innerHTML);
   // alert('2- ' + table.innerHTML);
  
   table.hide();
   $(this).prop("disabled", true);
  }
  
  // ***********************************************************************
  
  // If *table* defines &lt;thead&gt; then this function replaces the table with N
  // tables separated by a page break. Each new table starts with &lt;thead&gt; and its
  // height is at most maxHeight pixels.
  //
  // *table* must not have the id attribute since it is cloned N-times. Use the
  // class attribute instead.
  //
  function splitTable(table, maxHeight) {
   var header = table.children("thead");
   if (!header.length)
    return;
  
   var headerHeight = header.outerHeight();
   var header = header.detach();
  
   var splitIndices = [ 0 ];
   var rows = table.children("tbody").children();
  
   maxHeight -= headerHeight;
   var currHeight = 0;
   rows.each(function(i, row) {
    currHeight += $(rows[i]).outerHeight();
    if (currHeight &gt; maxHeight) {
     splitIndices.push(i);
     currHeight = $(rows[i]).outerHeight();
    }
   });
   splitIndices.push(undefined);
  
   table = table.replaceWith('&lt;div id="_split_table_wrapper"&gt;&lt;/div&gt;');
   table.empty();
  
   for (var i = 0; i &lt; splitIndices.length - 1; i++) {
    var newTable = table.clone();
    header.clone().appendTo(newTable);
    $('&lt;tbody /&gt;').appendTo(newTable);
    rows.slice(splitIndices[i], splitIndices[i + 1]).appendTo(
      newTable.children('tbody'));
    newTable.appendTo("#_split_table_wrapper");
    if (splitIndices[i + 1] !== undefined) {
    $(
    '&lt;div style="display: block; page-break-before: always; 
               page-break-inside: avoid; page-break-after: auto; 
               -webkit-region-break-inside: avoid; margin:0; padding:0; 
               border: none;"&gt;&lt;/div&gt;')
    .appendTo("#_split_table_wrapper");
    }
  
    window.print();
   }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* CSS CODE */
  
  @CHARSET "UTF-8";
  
  
  /* //////////////////////////////////////////////////////////////////////// */
  body {
   margin: 0 auto;
   text-align: center;
   font-size: 14px;
  }
  
  /* //////////////////////////////////////////////////////////////////////// */
  @media print {
   @page {
     /* size: A4;*/
      margin: 1.0cm;
   size: landscape;
   float: none !important; 
   zoom: 0.5;
   }
      html, body {
          width: 210mm;
          height: 297mm;
          /*overflow: visible;
    font-size: 12px !important;
    font-family: Arial;
    line-height: 1.2;
    width: 100%;
    height: auto;
    display: block !important;
    overflow: visible !important;
    */
      }
   .page-break {
    width: 900px;
    display: block;
    page-break-before: always !important;
    page-break-inside: avoid !important;
    page-break-after: auto !important;
    /*-webkit-region-break-inside: avoid !important;*/
   }
   /*  table { */
   /*   overflow: visible; */
   /*   height: auto; */
   /*   display: block; */
   /*   page-break-before: always !important; */
   /*   page-break-inside: avoid !important; */
   /*   page-break-after: auto !important; */
   /*   -webkit-region-break-inside: avoid !important; */
   /*   border-collapse: separate; */
   /*   border-spacing: 0; */
   /*  } */
   thead {
    /*height: auto;
    display: table-header-group;*/
    color: blue;
   }
   tbody {
    /*   display: table-column; */
    /*display: table-row-group;*/
    color: green;
   }
   tfoot {
    /*display: table-footer-group;*/
    color: red;
   }
   .primeFaces-dataTable-className {
    /* height: auto; */
    /*color: #000;
    border: 0;
    padding: 5px 5px 5px 5px;
    border-style: solid;*/
    /*   border-top: 1px solid red; */
    /*   border-bottom: 1px solid green; */
    /*   border-right: 1px solid black; */
    /*   border-left: 1px solid yellow; */
    /*   border-width: 1px solid blue; */
    /*   overflow-y: hidden !important; */
    /*   overflow-x: hidden !important; */
    /*   word-wrap: break-word; */
   }
   /*  // */
   /*  // */
   /*  th,td { */
   /*   padding: 10px 15px; */
   /*  } */
   /*  td { */
   /*   border-bottom: 1px solid #cecfd5; */
   /*   border-right: 1px solid #cecfd5; */
   /*   padding: 2px 5px 2px 5px; */
   /*   color: green; */
   /*  } */
   /*  td:first-child { */
   /*   border-left: 1px solid #cecfd5; */
   /*  } */
   /*  td:last-child { */
   /*   page-break-after: auto; */
   /*  } */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- HTML CODE --&gt;
  
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
   xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"&gt;
  
  
  &lt;head&gt;
   &lt;title&gt;Recherche Par Numéro de Client&lt;/title&gt;
  
   &lt;script src="print.js"&gt;&lt;/script&gt;
   &lt;script src="jquery-1.9.1.min.js"&gt;&lt;/script&gt;
  
   &lt;!--  only, on bottom --&gt;
   &lt;link rel="stylesheet" type="text/css" href="print.css" media="print" /&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
    &lt;input type="button" onclick="printAll2('#XXX')" value="Print 00" width="40" /&gt;
  
    &lt;input type="button" onclick="splitTable($('#XXX'), 500)" value="Print 0" width="40" /&gt;
  
    &lt;input type="button" onclick="printDiv('resultatAlisNumeroContratX')" value="Print 1" width="40" /&gt;
  
    &lt;input type="button" onclick="printout('resultatAlisNumeroContratX')" value="Print 2" width="40" /&gt;
  
    &lt;br /&gt;
    &lt;br /&gt;
  
    &lt;div id="resultatAlisNumeroContratX" class="page-break"&gt;
  
     &lt;div id="dataTableAlisNumeroContrat" &gt;
      &lt;div class="ui-datatable-tablewrapper"&gt;
       &lt;table id="XXX" role="grid" border="1"&gt;
        &lt;thead id="dataTableAlisNumeroContrat_head"&gt;
         &lt;tr role="row"&gt;
          &lt;th style="width: 20px"&gt;&lt;span&gt;Content Column 01&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 50px"&gt;&lt;span&gt;Column 02&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 60px"&gt;&lt;span&gt;Column 03&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 150px"&gt;&lt;span&gt;Column 04&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 150px"&gt;&lt;span&gt;Column 05&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 150px"&gt;&lt;span&gt;Column 06&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 130px"&gt;&lt;span&gt;Column 07&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 100px"&gt;&lt;span&gt;Column 08&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 100px"&gt;&lt;span&gt;Column 09&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 130px"&gt;&lt;span&gt;Column 10&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 130px"&gt;&lt;span&gt;Column 11&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 130px"&gt;&lt;span&gt;Column 12&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 100px"&gt;&lt;span&gt;Column 13&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 110px"&gt;&lt;span&gt;Column 14&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 100px"&gt;&lt;span&gt;Column 15&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 120px"&gt;&lt;span&gt;Column 16&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 90px"&gt;&lt;span&gt;Column 17&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 170px"&gt;&lt;span&gt;Column 18&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 110px"&gt;&lt;span&gt;Column 19&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 20&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 170px"&gt;&lt;span&gt;Column 21&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 22&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 23&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 24&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 25&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 26&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 27&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 28&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 29&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 30&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 170px"&gt;&lt;span&gt;Column 31&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 32&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 33&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 34&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 35&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 36&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 37&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 38&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 39&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 40&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 170px"&gt;&lt;span&gt;Column 41&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 42&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 43&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 44&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 45&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 46&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 47&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 48&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 49&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 50&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 170px"&gt;&lt;span&gt;Column 51&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 52&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 53&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 54&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 55&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 56&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 57&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 58&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 59&lt;/span&gt;&lt;/th&gt;
          &lt;th style="width: 300px"&gt;&lt;span&gt;Column 60&lt;/span&gt;&lt;/th&gt;
         &lt;/tr&gt;
        &lt;/thead&gt;
  
        &lt;tfoot id="dataTableAlisNumeroContrat_foot"&gt;&lt;/tfoot&gt;
  
        &lt;tbody id="dataTableAlisNumeroContrat_data" class="ui-datatable-data ui-widget-content"&gt;
         &lt;tr data-ri="0" class="ui-widget-content ui-datatable-even" role="row"&gt;
          &lt;td&gt;Content Column 01&lt;/td&gt;
          &lt;td&gt;Content Column 02&lt;/td&gt;
          &lt;td&gt;Content Column 03&lt;/td&gt;
          &lt;td&gt;Content Column 04&lt;/td&gt;
          &lt;td&gt;Content Column 05&lt;/td&gt;
          &lt;td&gt;Content Column 06&lt;/td&gt;
          &lt;td&gt;Content Column 07&lt;/td&gt;
          &lt;td&gt;Content Column 08&lt;/td&gt;
          &lt;td&gt;Content Column 09&lt;/td&gt;
          &lt;td&gt;Content Column 10&lt;/td&gt;
          &lt;td&gt;Content Column 11&lt;/td&gt;
          &lt;td&gt;Content Column 12&lt;/td&gt;
          &lt;td&gt;Content Column 13&lt;/td&gt;
          &lt;td&gt;Content Column 14&lt;/td&gt;
          &lt;td&gt;Content Column 15&lt;/td&gt;
          &lt;td&gt;Content Column 16&lt;/td&gt;
          &lt;td&gt;Content Column 17&lt;/td&gt;
          &lt;td&gt;Content Column 18&lt;/td&gt;
          &lt;td&gt;Content Column 19&lt;/td&gt;
          &lt;td&gt;Content Column 20&lt;/td&gt;
          &lt;td&gt;Content Column 21&lt;/td&gt;
          &lt;td&gt;Content Column 22&lt;/td&gt;
          &lt;td&gt;Content Column 23 &lt;br/&gt; CommencementDate = 2014-03-20 &lt;br /&gt;InsuranceCompany = 8 &lt;br /&gt;PolicyNoKey
           = 02 &lt;br /&gt;TypeDenouement = 0&lt;/td&gt;
          &lt;td&gt;Content Column 24 &lt;br/&gt; ActivityInstructionDate = 2014-05-27&lt;/td&gt;
          &lt;td&gt;Content Column 25 &lt;br/&gt; ActivityName = Nouvelle offre &lt;br /&gt;LastUpdatedRegDate = 2002-09-09 &lt;br /&gt; &lt;br /&gt;ActivityCode = 4014 &lt;br /&gt;ActivityName = MAJ
           Cotisation - Vers. Unique - Rétro &lt;br /&gt;LastUpdatedRegDate = 2000-05-31 &lt;br /&gt; &lt;br /&gt;ActivityCode = 750 &lt;br /&gt;ActivityName = Repartition
           &lt;br /&gt;LastUpdatedRegDate = 2003-09-02 &lt;br /&gt; &lt;br /&gt;ActivityCode = 652 &lt;br /&gt;ActivityName = Mouvement partiel - Versement libre &lt;br /&gt;LastUpdatedRegDate
           = 1980-01-01 &lt;br /&gt; &lt;br /&gt;ActivityCode = 750 &lt;br /&gt;ActivityName = Repartition &lt;br /&gt;LastUpdatedRegDate = 2003-09-02 &lt;br /&gt; &lt;br /&gt;&lt;/td&gt;
          &lt;td&gt;Content Column 26&lt;/td&gt;
          &lt;td&gt;Content Column 27&lt;/td&gt;
          &lt;td&gt;Content Column 28&lt;/td&gt;
          &lt;td&gt;Content Column 29&lt;/td&gt;
          &lt;td&gt;Content Column 30&lt;/td&gt;
          &lt;td&gt;Content Column 31&lt;/td&gt;
          &lt;td&gt;Content Column 32&lt;/td&gt;
          &lt;td&gt;Content Column 33&lt;/td&gt;
          &lt;td&gt;Content Column 34&lt;/td&gt;
          &lt;td&gt;Content Column 35&lt;/td&gt;
          &lt;td&gt;Content Column 36&lt;/td&gt;
          &lt;td&gt;Content Column 37&lt;/td&gt;
          &lt;td&gt;Content Column 38&lt;/td&gt;
          &lt;td&gt;Content Column 39&lt;/td&gt;
          &lt;td&gt;Content Column 40&lt;/td&gt;
          &lt;td&gt;Content Column 41&lt;/td&gt;
          &lt;td&gt;Content Column 42&gt;/td&gt;
          &lt;td&gt;Content Column 43&lt;/td&gt;
          &lt;td&gt;Content Column 44&lt;/td&gt;
          &lt;td&gt;Content Column 45&lt;/td&gt;
          &lt;td&gt;Content Column 46&lt;/td&gt;
          &lt;td&gt;Content Column 47&lt;/td&gt;
          &lt;td&gt;Content Column 48 &lt;br/&gt; Gender = 1 &lt;br /&gt;JuridicallyUnableCode = 0 &lt;br /&gt;LifeStatus = 0&lt;/td&gt;
          &lt;td&gt;Content Column 49 &lt;br/&gt; CommencementDate = 2014-03-20 &lt;br /&gt;InsuranceCompany = 8 &lt;br /&gt;PolicyNoKey
           = 02 &lt;br /&gt;TypeDenouement = 0&lt;/td&gt;
          &lt;td&gt;Content Column 50&lt;/td&gt;
          &lt;td&gt;Content Column 51&lt;/td&gt;
          &lt;td&gt;Content Column 52&lt;/td&gt;
          &lt;td&gt;Content Column 53&lt;/td&gt;
          &lt;td&gt;Content Column 54&lt;/td&gt;
          &lt;td&gt;Content Column 55&lt;/td&gt;
          &lt;td&gt;Content Column 56&lt;/td&gt;
          &lt;td&gt;Content Column 57&lt;/td&gt;
          &lt;td&gt;Content Column 58&lt;/td&gt;
          &lt;td&gt;Content Column 59&lt;/td&gt;
          &lt;td&gt;Content Column 60&lt;/td&gt;
         &lt;/tr&gt;
        &lt;/tbody&gt;
       &lt;/table&gt;
  
  
  
       &lt;table class='tmp_table'&gt;
       &lt;/table&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>