短

Question

短

尝试获取具有精确尺寸的表格以进行a4打印

表格的顶部和底部两侧的第一行和最后一行的边距必须 11 mm
行之间的边距'0 mm
表格的行必须位于 4 mm <纸张的左右侧
2 mm
38 mm宽x 21.2 mm高每个细胞
13行，5 x列，13x5 = 65个单元

这是JS小提琴

http://jsfiddle.net/tt13/ZjBrV/

问题

在这种情况下我该怎么办？如何获得上述条件的表格？

详细

html表看起来像那样

<body>
  <table>
    <td> 
     <div class="bcell">
      sample text2<br/>
      <img src="..."/><br/>
      sample text2
     </div>
     </td>
   ....
  </table>
</body>

使用下面的css来获得A4尺寸的打印结果，但是得到的东西与我上面解释的条件完全不同。

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

Answer 1

很明显，您希望打印输出，并且尺寸至关重要;可能你打印在亲吻标签纸或其他东西上。您似乎不太可能获得能够在所有浏览器和操作系统上产生像素完美结果的HTML解决方案。我要考虑的两个选项是：

将网格生成为图像并将其显示在网页上进行打印。
将网格生成为PDF以供下载和打印。

所有服务器端环境中都有库来执行这两项任务。根据我的经验，＃2会产生更好的结果。

Answer 2

Css在更改表格单元格元素的宽度方面无效。您要做的是将单元格的内容包装在div或span中，并使用td：first-child在css中设置宽度，或使用css table model。

创建具有固定尺寸的html表

短

问题

详细

2 个答案: