2012-02-04 156 views
0

试图获得与A4打印精确的尺寸表创建HTML表有固定尺寸

  • 顶部和纸底双方表的第一行和最后一行页边距必须11毫米的行0毫米
  • 表的行之间
  • 保证金必须4毫米
  • 2毫米左右两侧的每一列之间
  • 38毫米宽×21.2毫米高度每个小区
  • 13 x行,5×列服务,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;    
     } 
+0

这就像您第三次询问。如果你设置了一个jsfiddle,你会得到INSTANT结果。对代码进行调整和播放要比试图自行解释它容易得多。 – mowwwalker 2012-02-04 22:00:45

+0

@Walkerneo http://jsfiddle.net/tt13/ZjBrV/ – 2012-02-04 22:06:42

+0

@Walkerneo so?你看过吗? – 2012-02-04 22:13:00

回答

1

Css无法有效更改表格单元格的宽度。你要做的是将单元格的内容包装在div或span中,并使用td:first-child设置css的宽度,或使用css table model

2

很明显,您希望输出用于打印,并且尺寸至关重要;可能你正在印上吻切标签纸或其他东西。看起来不太可能你会得到一个HTML解决方案,它将在所有浏览器和操作系统上产生像素完美的结果。我会考虑的两个选项是:

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

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