2017-08-07 19 views
4

私は行スパンを介して関連するセルを使用して、その中にデータのチャンクを持つテーブルを持っています。 印刷プレビューで表示されているようにmozilla/firefoxエンジンを使用して印刷すると、ほぼ100ページの印刷が行われているように見えます。その上にほぼ一本の線があります。firefoxは複数のページを印刷しますrowspan

私はいくつかのテーブル、tr、td、tdスパンレベルpage-break-insideを試しました:避けてください しかし、それは大きな違いはありません。

私はrowspanの代わりにdivを使用していると読んでいますが、divは数年前のことでしたが、1〜2ピクセル横に並んでいないアイテムが多すぎます。

このエンジンはpdf発電機で使用されているものと同じですので、firefoxを使用して問題を確認するのは簡単です。

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style> 
* { 
    font-family: Lucida Sans Unicode, Trebuchet MS; 
} 
body { 
    font-family: Lucida Sans Unicode, Verdana; 
    color: #333333; 
    font-size: 12pt; 
    padding-left: 50px; 
    padding-right: 50px; 
    margin: 0px; 
} 
.SpecTable { 
    width: 100%; 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
.QIRow { 
    border-bottom: 1px solid #EEEEEE; 
    vertical-align: top; 
} 
.LeftColumn { 
    text-align: left; 
} 
.RightColumn { 
    text-align: right; 
} 
.SpecTable td { 
    vertical-align: top; 
    max-width: 300px; 
    min-width: 90px; 
    word-wrap: break-word; 
    font-family: Lucida Sans Unicode, Trebuchet MS; 
    font-size: 10pt; 
    border-bottom: 1px solid #000000; 
    padding-top: 5px; 
    padding-bottom: 5px; 
} 
.QIRow.QIBottomBorder2 { 
    border-bottom: 1px solid #EEEEEE; 
} 
span.PDFComment { 
    padding-left: 10px !important; 
    padding-top: 0px !important; 
    display: inline-block; 
} 
.QIRow span { 
    font-family: Lucida Sans Unicode, Trebuchet MS; 
    font-size: 10pt; 
    padding: 0 10px 10px 10px; 
} 
.QIRow div { 
    width: 100%; 
    display: inline-block; 
    padding-bottom: 5px; 
} 
.gggggDesc { 
    padding-left: 10px; 
    font-size: 13px; 
} 
.SN, .STTName { 
    font-family: Lucida Sans Unicode, Trebuchet MS; 
    font-size: 13px; 
    padding-left: 10px !important; 
    display: block !important; 
    border-radius: 5px; 
    margin-bottom: 5px; 
    color: #00699f; 
} 
.SpecTable th { 
    padding: 10px; 
    max-width: 300px; 
    min-width: 90px; 
    font-family: Lucida Sans Unicode, Trebuchet MS; 
    font-size: 11pt; 
    border-top: 1px solid #000000; 
    border-bottom: 1px solid #000000; 
    color: #333333; 
} 
.ImportantColumn { 
    background-color: #F1F6CF; 
} 
.DarkGreyBackround { 
    background-color: #EEEDED; 
} 
.DarkGreyBackround { 
    background-color: #EEEDED; 
} 
</style> 
</head> 
<body> 

<div>  
    <table class="SpecTable" cellpadding="0"> 
     <colgroup> 
      <col width="250"> 
      <col> 
       <col width="180">   <col width="100" class="ImportantColumn"> 
       <col width="180" class="DarkGreyBackround">  </colgroup> 
     <thead> 
      <tr> 
       <th class="LeftColumn">xxxx</th> 
       <th class="LeftColumn">xxxx</th> 
        <th class="LeftColumn">xxxxx xxxx</th> 
       <th class="RightColumn">xxxxx xxx xxx xxxx</th> 
        <th class="LeftColumn">xxxxx xxxxxxxxxxx</th> 
      </tr> 
     </thead> 
       <tbody><tr> 
       <td class="LeftColumn" rowspan="3"> 
          <span class="STTName">xxxxx xxxxxxxx xxxxxxxx xxx</span> 


        </td> 
        <td rowspan="3"> 
         <div class="gggggDesc"> 
          aiaa aaaaiaa Aaaaaaaia Paaa -&amp;abap;<br> 
aaAa aAa PAaa aaaaa Paaa A<br> 
aa aiaby aaaa, aaaaa aavaaaay aa4a<br> 
aaaaa aaa aaiaaiaa aaaaaia aaaaiaa aa aaaa aaaaaaaa.<br> 
<br> 
Paaiaiaa &amp;aap; aaaaaia aaaa aaaaa aiaa a aiaa aiaaaa aaaaaa ia aaa ia aaiaa.<br> 
aaaaaa aaa aaa aa aiaa aaaaaiaa aa aaaaAaaa aaAaa aaaY &amp;aap; aaaaaia aaaa ia aaa paaiaiaa aaaaiaa aaaaa aaaa aaaa ia aaiaa.<br> 
<br> 
Paaiaiaa &amp;aap; aaaaaia aaaa aa aaaaiaaa aaaaaa ia aaiaa ,aa ia aiaaa aaa,aa ia aaaa aaa aaa aa ia aaaa aaa.<br> 
aayaaa &amp;aap; aaaa aa - aaaaa aiaa aaiaa aaap aiaaa aaaaaa aaaaa aa aiaaaa aaaa aiaa aaaaa aiaa aaaP aaaaaia aaaaaa aiaa aiaa<br> 
<br> 
ia aaiaa.<br> 
<br> 
aaaaa aaa aaa aaaaa ayaaa baya aaa aaaaaia aaaaiaaa.<br> 
<br> 
aaaa a5 aaiaaiaa baya ia Yaaaaa aaa aaaaaia aaaa aaaaa aaaa aa baya aaaaa aYaaaa aaaa ia Yaaaaa. aaaaa aiaa aaaa.<br> 
<br> 
*Aaaa aaaa ba aaaAa, aaaAa &nbsp; aaY baaaaa aaaaaaaiaa jab.<br> 
*Qaaaa aaaaaa aaa aaa aiaa viaia aaay.<br> 
*Aay aaaiaiaaaa aiaa viaiaa aiaa iaaaa aa aaaaa aaaaaa aa $aaa paa viaia.*Qaaaa aaaaaa aaa aaaaiaa aa aaaaaaa.<br> 
*Paiaa aaqaiaaa aaaa aaaaa aay aiaa.<br>aiaa aaaaiaa Aaaaaaaia Paaa&amp;abap;<br> 
<br> 
-aaaaa aaaaaaaa Paaaiaa Aaaa &amp;abap; &amp;abap;aa aiaby aaaa, aaaaa aavaaaay aa4a aaaa aa7 aaiaaiaa baya ia aaiaa. Paaiaiaa aaa aaaa aa aiaabaaa aaaa ia aaaa &nbsp; aaiaa. apaay a4 aaiaaiaa aaaaaaaa aaavaa ia aaaia Yaaaaa. aaaaa aaa aaa aaaaaia aaaaiaaa ia aaaia aaaaa.<br>aiaa aaaaiaa Aaaaaaaia Paaa&amp;abap;<br>-aaAa aAa PAaa aaaaa Paaa a &amp;abap; &amp;abap;<br>aa aiaby aaaa, aaaaa aavaaaay aa4a<br>aaaa a a45 aaiaaiaa baya ia aaiaa.<br>Paaiaiaa aaa aaaa aa aiaabaaa aaaa ia aaaa &nbsp; aaiaa.<br>PaaAaa aaaa aaIa aaaa aaa Iaaaaaa VAa PAaaIaa aAYa Aaaaaa aaaaIaa<br>aaaaa aaa aaa aaaaaia aaaaiaaa ia aaaia aaaaa.<br> 
         </div> 
        </td> 
          <td class="QIRow LeftColumn QIBottomBorder2"> 
           Rear Car Park 
          </td> 
          <td class="QIRow RightColumn QIBottomBorder2"> 
           <div> 
            <span> 
xxxxxx 
            </span> 
           </div> 
          </td> 
          <td class="QIRow LeftColumn QIBottomBorder2"> 
           <span class="PDFComment">Date 
cc ccc cccc 
ccpcrc 
cc ccg cccc 
ccocc cccccr 
cc-cccc 
cccc ccrcccg ccccrcccc Pocc 
cc Gcccc Rocc, coccc ccvcrccc cccc 
crocc Ccccoccr Pcrcccg crcc 
ccrc ccc cccccccg cccc cc ccccc. 
Poccccoc ccc ccrc cc cccccccc cogo cc cccc &amp;ccp; ccccc. 
cprcc cc cccccccg coccrccc ccrvcc cc coccc ccccoc. 
ccccc occ occ ccccccc ccrcccgc cc coccc ccccc. 
coc ccccrcpccoc cccccccc cccc Prccc ccoccc 
cc pcr cccccrc ccovc c.cc ccc.cc ccc.cc 
ccccoccc ccc.cc 
coccc Gcc ccc cc.cc 
cOccc ccc c,ccc.cc 
ccrcc 
ccrcc oc Pcccccc crc cc cccc croc ccvoccc cccc. 
crcc cccc cc Ccccc, CcccR &amp;ccp; cRc cccorc cocccccccg coc. 
ccocc cccocc cor occ cccc vcccc occc. 
ccc ccccccoccc cccc vccccc cccc ccccr cc cccrc cccrgc oc cccc pcr vcccc. 
ccocc cccocc cor corcccg oc ccccccc. 
Pcccc rccccrcc cocr cocrc crc cccc. 
</span> 
          </td> 
</tr><tr>       <td class="QIRow LeftColumn QIBottomBorder2"> 
           Front Customer Car Park 
          </td> 
          <td class="QIRow RightColumn QIBottomBorder2"> 
           <div> 
            <span> 
xxxxxxxx 
            </span> 
           </div> 
          </td> 
          <td class="QIRow LeftColumn QIBottomBorder2"> 
           <span class="PDFComment">18 Jul 1017 
bbpbby 
bb bbg bbb7 
bbbbb bbbbbb 
bb-bbbb 
bbbb bbbbbbg bbbbbbbbb Pbbb 
b9 Gbbby bbbd, bbbbb Wbvbbbby bbb9 
Bbbbb bbb bbbbbbbg bbbbbbb bbbbbbg bb Gbbb bbbbbbbb. 
Pbbbbbbb &nbsp; bbbbbbb bbbb bbbbb bbgb 8 wbbb bbbbbb bbbbbd bb bbb bb Wbbbb. 
bbbbbb bbw bbb bb bbgb bbbbbbbb bb bbbbbbbb bbbbb bbbY &amp;bbp; bbbbbbb bbbb bb bbb pbbbbbbb bbbbbdb bbbbb gbbb bbbb bb Wbbbb. 
Pbbbbbbb &nbsp; bbbbbbb bbbb bb bbbbbgbb bbbbwb bb Wbbbb ,bb bb bbbbb bbw,bb bb bbbb bbw bbd bb bb bbbb bbw. 
bbybbb &nbsp; bbbb bb - bbbbb wbdb Wbbbb bbbp bbbbb bbbbbb bbbbb bb bbddbb bbwb wbbb bbbbb bbgb bbbP bbbbbbb bbbbbd wbbb bbbb 
bb Wbbbb. 
Bbbbb bbb bbd bbbbb bybbb bbyb bbd bbbbbbb bbbbbbgb. 
bbbb bb bbbbbbbg bbyb bb Ybbbbw bbd bbbbbbb bbbb bbbbb bdgb bb bbyb bbbbb bYbbbb bbbb bb Ybbbbw. bbbbb bbgb bbbb. 
Jbb Dbbbbbpbbbb bbbbbbby bbbb Pbbbb bbbbbb 
bb pbb bbbbbby bbbvb b.bb b,bbb.bb b,bbb.bb 
bbbbbbbb b,bbb.bb 
bbbbb Gbb bb% bbb.bb 
bbbbb bbD b,bb8.bb 
bbbbb 
bbbbb bb Pbybbbb bbb bb dbyb bbbb bbvbbbb dbbb. 
bbbb bbbb bb bbbbb, bbbbb &nbsp; DbY bbbbbb bbbbbbbbbg jbb. 
bbbbb bbbbwb bbb bbb bbbb vbbbb bbby. 
bby bddbbbbbbb bbbb vbbbbb wbbb bbbbb bb bbbbb bbbbgb bb $b8b pbb vbbbb. 
bbbbb bbbbwb bbb wbbbbbg bb wbbbbbd. 
Pbbbb bbbbbbbb bbbb bbbbb dby bbbb.</span> 
          </td> 
</tr>     


    </tbody></table> 
</div> 






</body> 
</html> 
+0

aha moment。 'inline-block'の代わりに 'display:block'を使用するようにspan.PDFCommentを変更してください。 – Wayne

答えて

0

aha moment。 span.PDFCommentを変更して、 'inline-block'の代わりに 'display:block'を使用します。

関連する問題