打印非常宽的HTML表格，而不剪裁右侧

我有一个有几列的表

具体问题 打印此类表格时，即使以横向打印，右侧的列也不会打印

期望的行为 浏览器应打印整个表格，必要时使用多张表格。CSS/JavaScript解决方案是可以接受的

重现问题所需的最短代码 单击下面演示中的“打印”按钮。在打印预览窗口中查看页面的右侧

$（函数（）{
$（“输入：第一”）。单击（函数（）{
window.print（）；
});
$（“.description”）。每个（函数（）{
变量文本="我们的知识来自于我们的知识，来自于我们的精英，来自于我们的信仰，来自于我们的信仰，来自于我们的信仰，来自于我们的信仰，来自于我们的信仰，来自于我们的信仰，来自于我们的信仰，来自于我们的信仰，来自于我们的信仰。这是一个令人振奋的时刻，因为我们的生命只是一个直径不变的脉冲生命。”；
text=text.substr（0，Math.ceil（Math.random（）*100））；
$（此）.text（文本）；
});
$（“.number”）.each（函数（）{
var text=（Math.random（）*1000）.toFixed（2）；
$（此）.text（文本）；
});
})；

@媒体屏幕{
输入{
宽度：100%；
利润率：1米0；
}
}
@媒体印刷品{
输入{
显示：无；
}
}
th{
字体：粗体12px无衬线；
边框：1px实心；
空白：nowrap；
}
运输署{
字体：12px无衬线；
边框：1个点；
}
td.说明{
最小宽度：200px；
边框样式：实心；
}
td编号{
左侧填充：20px；
文本对齐：右对齐；
边框样式：实心；
}

2009
2010
描述
简
二月
破坏
四月
也许
六月
七月
八月
九月
十月
十一月
12月
简
二月
破坏
四月
也许
六月
七月
八月
九月
十月
十一月
12月
全部的
批号1
批号2
批号3
批号4
全部的

使用

见这个问题：

关键是，你不能让浏览器像excel那样打印水平表格。你必须切换到最多一页宽的浏览器。

我的做法是：

• 及

我所做的是：

• 创建一个固定宽度的div，可以很好地放在A4大小的页面上
• 复制了该div中的表
• 滚动表格x像素，使用CSS定位将所需部分置于“焦点”中
• 重复此过程y次

示例：如果表格宽度为2000px，页面宽度设置为600px，则y应为4，x将为0、600、1200和1800，由@（Salman A）提供的答案我在Chrome和Firefox上工作得很好。我对其进行了如下修改，以打破列边界：

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);

};

var acSplitTable=函数（）{
var table=$（“.ac print.ac grid>table”），
tableWidth=table.outerWidth（），
页面宽度=600，
pageCount=Math.ceil（表宽/页宽），
printWrap=$（“”）。在（表）后面插入，
我
打印页；
$（“.ac print.ac grid>table.ac hidden”）.remove（）；
var头寸=[]；
var lastOuterWidth=0；
$（“.ac print.ac grid>table th”）.each（函数（）{
positions.push（$（this）.position（）.left）；
lastOuterWidth=$（此）.outerWidth；
});
var页面宽度=[]；
var endColumns=[]；
var lastPosition=0；
对于（i=1；ipageWidth）{
页面宽度.推送（位置[i-1]-lastPosition）；
lastPosition=位置[i-1]；
endColumns.push（i-1）；
}
如果（i==（positions.length-1））{
页面宽度。推送（位置[i]+最后一个外层宽度-最后一个位置）；
lastPosition=位置[i]；
endColumns.push（i）；
}
}
pageCount=pageWidths.length；
var lastEndColumn=0；
对于（i=0；ivar 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);

};