适合 A4 大小的 html 表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36475011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fit a html table in A4 size
提问by clearScreen
I have a html file with a wide table. I want to be able to put it in a A4 size. The columns that exceed the A4 size should come below in a new table.
我有一个带有宽表的 html 文件。我希望能够将其放入 A4 尺寸。超过 A4 大小的列应出现在新表的下方。
I tried using this the @page attribute, but it didn't change anything,
我尝试使用这个 @page 属性，但它没有改变任何东西，
<style type="text/css">
@page { size: 21cm 29.7cm; margin: 30mm 45mm 30mm 45mm; }
</style>
Is there any third party js library that automatically does this? (The table size is not known before hand, the user uploads data and generates the table, so the number of columns is not fixed). {My end goal is to print this as a pdf, but I could not achieve this using the qprinter given in QT}
是否有任何第三方 js 库可以自动执行此操作？（表大小事先不知道，用户上传数据生成表，所以列数不固定）。{我的最终目标是将其打印为 pdf，但我无法使用 QT 中给出的 qprinter 实现这一点}
I have put a html file with long table here - link.
我在这里放了一个带有长表的 html 文件 -链接。
Thanks in advance
提前致谢
回答by Fawad Ali
Table could not break its columns in a new row, all you can do is to make table width according to the paper width.
表格无法在新行中分列，您所能做的就是根据纸张宽度制作表格宽度。
A4 page width in px is 2480 pixels x 3508 pixels.
以 px 为单位的 A4 页面宽度为 2480 像素 x 3508 像素。
so you will make max-width of table to 2480px so that it could not exceed the size of paper.
所以你要把表格的最大宽度设为 2480 像素，这样它就不会超过纸张的大小。
Let's guess your table id="table", then your style should be.
让我们猜一下您的 table id="table"，那么您的风格应该是。
<style>
#table{
max-width: 2480px;
width:100%;
}
#table td{
width: auto;
overflow: hidden;
word-wrap: break-word;
}
</style>
回答by Ani Menon
You should try to use divs rather than tables if you want to get good printable sheets. With <div>we have better control of the way its displayed.
<div>can easily be styled unlike <table>,<tr>,<td>, etc.
如果您想获得良好的可打印表格，您应该尝试使用 div 而不是表格。随着<div>我们的其显示的方式更好的控制。
<div>很容易被不同风格<table>，<tr>，<td>，等。
Here is something I did :
这是我做的事情：
CSS
CSS
@media print {
@page {
margin: 0;
}
body {
height: 100%;
width: 100%;
}
div.divTableRow > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.1cm;
font-size: 1rem;
}
div.divTableRow {
display: block;
margin: solid 2px black;
margin: 0.2cm 1cm;
font-size: 0;
white-space: nowrap;
}
.divTable {
transform: translate(8.5in, -100%) rotate(90deg);
transform-origin: bottom left;
display: block;
}
}
.divTable {
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell,
.divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
width:100px; // set to a fixed value so as to get the table in the ordered manner.
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
You may customize the same as necessary.
您可以根据需要自定义相同的内容。
Fiddle : div-table-printable
You may convert your html with <table>to <div>using table-to-divs
您可以将您的 html 转换<table>为<div>使用table-to-divs
Other references:
其他参考：
回答by Arleigh Hix
This appears to do what you want, if that is to place the printed pages side-by-side and read the entire table as it is on screen. It worked with the html you provided in your link, add this to your stylesheet (I only tested in Chrome)
如果要将打印的页面并排放置并在屏幕上阅读整个表格，这似乎可以满足您的需求。它与您在链接中提供的 html 一起使用，将其添加到您的样式表中（我仅在 Chrome 中测试过）
@media print{
@page {size:landscape;}
html{
-ms-transform: rotate(90deg);/* IE 9 */
-webkit-transform: rotate(90deg);/* Chrome, Safari, Opera */
transform: rotate(90deg);
}
table,h1,h2 {position:relative;left:4.5cm}
}
The key is rotating the content for print so it overflows "down" to the next page, then set size to landscape to rotate the paper, so you end up with left to right portrait oriented pages. Unfortunately I could not get the page to break between columns. But if you are posting all the printed pages up on a wall side-by-side it will be readable. The print preview will show all the pages turned 90 degrees, that's what you want, then select A4 as the paper size in the print dialog. I had to reposition the table and your headings because it was hanging off the left side of the first page, maybe because of all the nested divs with in-line styles?, I do not know, like I said this worked with your html.
关键是旋转打印内容，使其“向下”溢出到下一页，然后将尺寸设置为横向以旋转纸张，这样您最终会得到从左到右的纵向页面。不幸的是，我无法让页面在列之间中断。但是，如果您将所有打印的页面并排张贴在墙上，它将是可读的。打印预览将显示所有旋转 90 度的页面，这正是您想要的，然后在打印对话框中选择 A4 作为纸张尺寸。我不得不重新定位表格和你的标题，因为它挂在第一页的左侧，也许是因为所有嵌套的 div 都带有内嵌样式？，我不知道，就像我说的，这适用于你的 html。
Here is the printed as pdf file (I repeated your first row a couple more times in this example) https://www.dropbox.com/s/fjyns5gaa4jiky4/wide-table%20printed.pdf?dl=0
这是打印的 pdf 文件（在这个例子中我重复了你的第一行几次）https://www.dropbox.com/s/fjyns5gaa4jiky4/wide-table%20printed.pdf?dl=0
