title: Print wide html table using HTML/css/javascript (with responsive design)
body: <p>I have tried the code from the <a href="http://css-tricks.com/responsive-data-tables/" rel="nofollow">article</a> to print my wide table in a single page, that worked great only for Google Chrome. Couldn't get it working on IE as mentioned in the article and comments. Below is my sample code with IE I tried almost for hours and couldn't get the issue.</p>
  
  <pre><code>function printGrid() {
    var gridElement = $('#grid'),
      printableContent = '',
      win = window.open('', '', 'scrollbars=1,resizable=1,width=1150,height=650,left=0,top=0'),
      doc = win.document.open(),
      dataSource = $("#grid").data("kendoGrid").dataSource;
    var htmlStart =
      '&lt;!DOCTYPE html&gt;' +
      '&lt;html&gt;' +
      '&lt;head&gt;' +
      '&lt;meta charset="utf-8" /&gt;' +
      '&lt;link href="../Content/kendo/2014.1.318/kendo.common.min.css"   rel="stylesheet" /&gt;' +
      '&lt;style&gt;' +
      'html { font: 11pt sans-serif; }' +
      '.k-grid { border-top-width: 0;}' +
      '.k-grid, .k-grid-content { height: auto !important;}' +
      '.k-grid-content { overflow: visible !important; }' +
      'div.k-grid table { table-layout: fixed; border:1px solid #000000; width: 100% !important; }' +
      '.k-grid .k-grid-header th { border-top: 1px solid; border:1px solid #000000;}' +
      '.k-grid td {border:1px solid #000000;} ' +
      '.k-grid-toolbar, .k-grid-pager &gt; .k-link { display: none; }' +
      '@media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px) {table, thead, tbody, th, td, tr {  display:block;width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;float:left;clear:left;}' +
      'thead tr {position: absolute;top: -9999px;left: -9999px;}' +
      'tr {border: 1px solid #ccc;}' +
      'td {border: none;border-bottom: 1px solid #eee;position: relative;padding-left: 50%;height:10px;}' +
      'td:before {position: absolute;top: 6px;left: 6px;width: 45%;padding-right: 10px;white-space: nowrap;}' +
      'td:nth-of-type(1):before {content: "Column1";}' +
      'td:nth-of-type(1):before {content: "Column2";}' +
      'td:nth-of-type(1):before {content: "Column3";}' +
      'td:nth-of-type(1):before {content: "Column4";}' +
      'td:nth-of-type(1):before {content: "Column5";}' +
      'td:nth-of-type(1):before {content: "Column6";}' +
      'td:nth-of-type(1):before {content: "Column7";}' +
      'td:nth-of-type(1):before {content: "Column8";}' +
      'td:nth-of-type(1):before {content: "Column9";}' +
      'td:nth-of-type(1):before {content: "Column10";}' +
      'td:nth-of-type(1):before {content: "Column11";}' +
      'td:nth-of-type(1):before {content: "Column12";}' +
      'td:nth-of-type(1):before {content: "Column13";}' +
      'td:nth-of-type(1):before {content: "Column14";}' +
      'td:nth-of-type(1):before {content: "Column15";}' +
      '}' +
      '@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {' +
      'body {padding: 0;margin: 0;width: 320px;}' +
      '}' +
      '@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {' +
      'body {width: 495px;}' +
      '}' +
      '&lt;/style&gt;' +
      '&lt;/head&gt;' +
      '&lt;body&gt;';
    var htmlEnd =
      '&lt;/body&gt;' +
      '&lt;/html&gt;';
    var gridHeader = gridElement.children('.k-grid-header');
    if (gridHeader[0]) {
      var thead = gridHeader.find('thead').clone().addClass('k-grid-header');
      printableContent = gridElement
        .clone()
        .children('.k-grid-header').remove()
        .end()
        .children('.k-grid-content')
        .find('table')
        .first()
        .children('tbody').before(thead)
        .end()
        .end()
        .end()
        .end()[0].outerHTML;
    } else {
      printableContent = gridElement.clone()[0].outerHTML;
    }
    doc.write(htmlStart + printableContent + htmlEnd);
    doc.close();
    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/ ') &gt;= 0;
    var isChrome = !!window.chrome &amp;&amp; !isOpera;
    if (!isChrome)
      win.print();
  }
  </code></pre>