打印一个非常宽的HTML表，没有右手边的剪裁 [英] Print a very wide HTML table without clipping right hand side
本文介绍了打印一个非常宽的HTML表，没有右手边的剪裁的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个包含多个列的表格。
特定问题
希望的行为
浏览器应该打印整个表，如果需要，使用多个工作表。可以接受CSS / JavaScript解决方案。
必要的SHORTEST代码复制问题
点击下面演示。在打印预览窗口中查看页面右侧。
$（function（）{$（input：first）。 （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.Udu dapibus，orci at feugiat eleinend，dui mi lobortis tortor，ac egestas neque enim et neque。Donec tempus mi quis tellus dapibus eu blandit magna sagittis。Curcinur ac ultrices tortor。Aliquam id tincidunt urna。Nunc id neque ; text = text.substr（0，Math.ceil（Math.random（）* 100））; $（this）.text（text）; }）; $（。number）。each（function（）{var text =（Math.random（）* 1000）.toFixed（2）; $（this） ;
@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 =buttonvalue =Print>< ; table> < tr> < td>< / td> < td>< / td> < th colspan =12> 2009< / th> < th colspan =12> 2010< / th> < td>< / td> < / tr> < tr> < td>< / td> < th>说明< / th> < th> Jan< / th> < th> Feb< / th> < th> Mar< / th> < th> Apr< / th> < th>五月< / 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>五月< / th> < th> Jun< / th> < th> Jul< / th> < th> Aug< / th> < th> Sep< / th> < th> Oct< / th> < th> Nov< / th> < th> Dec< / th> < th>总< / th> < / tr> < tr> < th rowspan =2>批次编号1< / th> < td rowspan =2class =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>批次编号2< / th> < td rowspan =4class =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>批次编号3< / th> < td rowspan =4class =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>批次编号4< / th> < td rowspan =2class =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>总< / 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>
解决方案
这里是我走过的地方：
我所做的是：
- 在A4尺寸页面上创建固定宽度的div
- 复制div内的表格
- 滚动表格 x 像素，使用CSS定位将所需部分置于焦点中
- 重复此过程 y 次
示例：如果表格宽度为2000px，页面宽度设置为600px， strong>应为 4 和 x 将为 0,600,1200 和 1800 。 b $ b
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>
解决方案
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.
这篇关于打印一个非常宽的HTML表，没有右手边的剪裁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
