26

I have a table with several columns.

THE SPECIFIC PROBLEM

When you print such table, the columns on right will not print, not even when you print in landscape orientation.

THE DESIRED BEHAVIOR

The browser should print entire table, use multiple sheets if necessary. CSS/JavaScript solutions are acceptable.

SHORTEST CODE NECESSARY TO REPRODUCE THE PROBLEM

Click the print button in the following demo. Look at the right hand side of page in print preview window.

$(function() {
  $("input:first").click(function() {
    window.print();
  });
  $(".description").each(function() {
    var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla placerat malesuada sodales. Nulla convallis neque lorem, ac varius enim. Ut dapibus, orci at feugiat eleifend, dui mi lobortis tortor, ac egestas neque enim et neque. Donec tempus mi quis tellus dapibus eu blandit magna sagittis. Curabitur ac ultrices tortor. Aliquam id tincidunt urna. Nunc id neque ac urna congue convallis. Etiam eget massa vitae justo aliquam pulvinar vitae ut diam.";
    text = text.substr(0, Math.ceil(Math.random() * 100));
    $(this).text(text);
  });
  $(".number").each(function() {
    var text = (Math.random() * 1000).toFixed(2);
    $(this).text(text);
  });
});
@media screen {
  input {
    width: 100%;
    margin: 1em 0;
  }
}
@media print {
  input {
    display: none;
  }
}
th {
  font: bold 12px sans-serif;
  border: 1px solid;
  white-space: nowrap;
}
td {
  font: 12px sans-serif;
  border: 1px dotted;
}
td.description {
  min-width: 200px;
  border-style: solid;
}
td.number {
  padding-left: 20px;
  text-align: right;
  border-style: solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="button" value="Print">

<table>
  <tr>
    <td></td>
    <td></td>
    <th colspan="12">2009</th>
    <th colspan="12">2010</th>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <th>Description</th>
    <th>Jan</th>
    <th>Feb</th>
    <th>Mar</th>
    <th>Apr</th>
    <th>May</th>
    <th>Jun</th>
    <th>Jul</th>
    <th>Aug</th>
    <th>Sep</th>
    <th>Oct</th>
    <th>Nov</th>
    <th>Dec</th>
    <th>Jan</th>
    <th>Feb</th>
    <th>Mar</th>
    <th>Apr</th>
    <th>May</th>
    <th>Jun</th>
    <th>Jul</th>
    <th>Aug</th>
    <th>Sep</th>
    <th>Oct</th>
    <th>Nov</th>
    <th>Dec</th>
    <th>Total</th>
  </tr>
  <tr>
    <th rowspan="2">Batch number 1</th>
    <td rowspan="2" class="description"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <th rowspan="4">Batch number 2</th>
    <td rowspan="4" class="description"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <th rowspan="4">Batch number 3</th>
    <td rowspan="4" class="description"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <th rowspan="2">Batch number 4</th>
    <td rowspan="2" class="description"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
  <tr>
    <th>Total</th>
    <td class="description"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
    <td class="number"></td>
  </tr>
</table>

3
  • 2
    Try this @media print{@page {size: landscape}} [This will help][1] [1]: stackoverflow.com/questions/138422/landscape-printing-from-html
    – Narek
    Commented Jan 17, 2012 at 9:08
  • 1
    If you read the question, even landscape orientation doesn't help. As I understand the question, it is whether you can get the browser to print very wide content on multiple pages - as far as I know you can't.
    – OlliM
    Commented Mar 5, 2012 at 15:23
  • this is not a "why isn't this code working?" question, it certanly asks "How To", to a specific topic, and tells what OP investigate and try Commented Dec 26, 2015 at 22:17

4 Answers 4

23

Here is my go at this:

What I did was:

  • Create a fixed width div that fits nicely on an A4 size page
  • Copied the table inside that div
  • Scroll the table x pixels to bring the desired portion in "focus" using CSS positioning
  • Repeat this process y times

Example: if the table is 2000px wide and page width is set to 600px then y should be 4 and x will be 0, 600, 1200 and 1800.

2
  • Unfortunately, this solution will generate page breaks that split right down the middle of a column. Excel makes sure that columns are not split across pages.
    – wrecks
    Commented Oct 8, 2016 at 13:59
  • 2
    @wrecks You could solve that with some extra effort, i.e. by looping through each column and checking if its offset exceeds the page boundary so you can split there instead of at a fixed 600px - seems like a fun problem (actually it was done just below by @(Astra Bear))! Also, fantastic solution @(Salman A), this is really great :)
    – Bilal Akil
    Commented Dec 18, 2017 at 20:56
5

The answer provided by @(Salman A) worked well for me on Chrome and Firefox. I modified it to break at column boundaries with the following:

var acSplitTable = function() {
    var table = $(".ac-print .ac-grid>table"),
        tableWidth = table.outerWidth(),
        pageWidth = 600,
        pageCount = Math.ceil(tableWidth / pageWidth),
        printWrap = $("<div></div>").insertAfter(table),
        i,
        printPage;

    $(".ac-print .ac-grid>table .ac-hidden").remove();

    var positions = [];
    var lastOuterWidth = 0;
    $(".ac-print .ac-grid>table th").each(function() {
        positions.push($(this).position().left);
        lastOuterWidth = $(this).outerWidth;
    });

    var pageWidths = [];
    var endColumns = [];

    var lastPosition = 0;
    for (i = 1; i < positions.length; i++) {
        if ((positions[i] - lastPosition) > pageWidth) {
            pageWidths.push(positions[i - 1] - lastPosition);
            lastPosition = positions[i - 1];
            endColumns.push(i - 1);
        }
        if (i == (positions.length - 1)) {
            pageWidths.push(positions[i] + lastOuterWidth - lastPosition);
            lastPosition = positions[i];
            endColumns.push(i);
        }
    }
    pageCount = pageWidths.length;

    var lastEndColumn = 0;
    for (i = 0; i < pageCount; i++) {
        var thisPageWidth = pageWidth; //pageWidths[i];
        var styleString = "overflow: hidden; width:" + thisPageWidth + "px; page-break-before: " + (i === 0 ? "auto" : "always") + ";";
        var newTable = table.clone().attr("id", "ac-print-page-" + i);
        newTable.attr("style", styleString);
        newTable.appendTo("#formpoint");

        //remove columns either side of our page
        for (var j = positions.length - 1; j >= 0; j--) {
            if (j > endColumns[i] || j <= lastEndColumn) {
                var index = j + 1;
                var heading = $(newTable).find("tr th:nth-child(" + index + ")");
                $(newTable).find("tr th:nth-child(" + index + ")").remove();
                $(newTable).find("tr td:nth-child(" + index + ")").remove();
            }
        }

        lastEndColumn = endColumns[i];
    }

    table.hide();
    $(this).prop("disabled", true);

    window.print();
    setTimeout(window.close, 0);

};
3

use

@media print{@page {size: landscape}}
0

See this question: Print Stylesheets for pages with long horizontal tables

The point is that you can't get a browser to print horizontal tables the same way as excel does. You have to switch to something that is at most one page wide.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.