创建具有固定维度的html表 短
尝试获取a4打印的精确尺寸表创建具有固定维度的html表 短,html,css,printing,html-table,Html,Css,Printing,Html Table,尝试获取a4打印的精确尺寸表 表格第一行和最后一行距纸张顶部和底部的边距必须11 mm 行与行之间的边距为0 mm 桌子的行必须位于距离纸张左右两侧4 mm的位置 2 mm每列之间 38 mm宽x 21.2 mm高每个单元格 13行,5列,13x5=65个单元格 这是JS小提琴 问题: 在这种情况下我能做什么?如何获得具有我上面解释的条件的表格 详细的 html表是这样的 <body> <table> <td> <div c
- 表格第一行和最后一行距纸张顶部和底部的边距必须11 mm
- 行与行之间的边距为0 mm
- 桌子的行必须位于距离纸张左右两侧4 mm的位置
- 2 mm每列之间
- 38 mm宽x 21.2 mm高每个单元格
- 13行,5列,13x5=65个单元格
<body>
<table>
<td>
<div class="bcell">
sample text2<br/>
<img src="..."/><br/>
sample text2
</div>
</td>
....
</table>
</body>
Css在更改表格单元格元素的宽度时无效。您要做的是将单元格的内容包装在div或span中,并使用td:first-child在css中设置宽度,或者使用。css在更改表格单元格元素的宽度时无效。您需要做的是将单元格内容包装在div或span中,并使用td:first子元素在css中设置宽度,或者使用。很明显,您需要打印输出,并且尺寸是关键的;可能是你在亲亲标签纸上打印。你似乎不太可能得到一个HTML解决方案,在所有浏览器和操作系统上都能产生像素级的完美效果。我将考虑的两个选项是:
所有服务器端环境中都有库来执行这两项任务。根据我的经验,#2产生更好的结果。很明显,您希望打印输出,并且尺寸非常关键;可能是你在亲亲标签纸上打印。你似乎不太可能得到一个HTML解决方案,在所有浏览器和操作系统上都能产生像素级的完美效果。我将考虑的两个选项是:
所有服务器端环境中都有库来执行这两项任务。根据我的经验,#2产生更好的结果。这就像你第三次问的那样。如果您设置了一个JSFIDLE,您将立即得到结果。调整和使用代码要比自己解释代码容易得多。@walkereno@walkereno所以呢?你看了吗?我在看,但我不清楚问题出在哪里。出什么问题了?@Walkereno我已经说过了,我几乎给出了所有参数的精确值。但结果却完全不同。看看这个截图。这是你第三次问我了。如果您设置了一个JSFIDLE,您将立即得到结果。调整和使用代码要比自己解释代码容易得多。@walkereno@walkereno所以呢?你看了吗?我在看,但我不清楚问题出在哪里。出什么问题了?@Walkereno我已经说过了,我几乎给出了所有参数的精确值。但结果却完全不同。看看这个截图。
body {
padding:11mm 4mm 0 4mm;
background: white;
font-family: Arial;
width: 210mm;
font-size:3mm;
}
table {
page-break-after:always;
width: 100%;
height: 275mm;
margin:0 auto;
page-break-inside:avoid;
border-collapse: collapse;
}
td img {
height:10mm;
}
td {
width: 38mm;
height:21.2mm;
padding: 0 1mm 0 1mm;
font-style: bold;
text-align: center;
vertical-align:middle;
}
tr {
page-break-after:auto;
page-break-inside:avoid;
height:21.2mm;
margin:0;
padding:0;
page-break-inside:avoid;
}