テーブルの幅をコンテンツより小さく設定

私はJavaのコードでFlying Saucer PDF生成ライブラリを使用して、HTMLテンプレートをPDFに変換しています。テンプレートは、固定数の列を持つ表で構成されます。私は、各列が一定の幅を持ち、その中の内容がオーバーフローで隠れるようにしたい。テーブルの幅をコンテンツより小さく設定

.col1 { 
    width: 50px; 
    max-width: 50px; 
    min-width: 50px; 
} 
.col2 { 
    width: 70px; 
    max-width: 70px; 
    min-width: 70px; 
} 
.col3 { 
    width: 120px; 
    max-width: 120px; 
    min-width: 120px; 
} 
td, th { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

コンテンツがその上に成長する場合、これは明らかに列幅を制限しません。テンプレートはChromeとFirefoxではうまく表示されますが、生成されたPDFでは表示されません。

Flying Saucer PDFで各列の幅を制限する方法はありますか？

出典

2016-05-23 Harshil Sharma

テーブルに次のスタイルを追加できます。table-layout:fixed。

例：勤務

<html> 
    <head> 
     <style type="text/css"> 
      .col1 {width: 50px;max-width:50px;min-width: 50px;} 
      .col2 {width: 70px;max-width: 70px;min-width: 70px;} 
      .col3 {width: 120px;max-width: 120px;min-width: 120px;} 
      table{table-layout:fixed;} 
      td, th { 
       border:1px solid red 
       overflow: hidden; 
       white-space: nowrap; 
      } 
    </style> 
    </head> 
    <body> 
     <table > 
     <thead> 
      <tr> 
      <td class="col1">Col1</td> 
      <td class="col2">Col2</td> 
      <td class="col3">Col3</td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td class="col1">Lorem ipsum dolor sit amet, consectetur </td> 
       <td class="col2">la, molestie vel diam vitae, bibendum consequat enim. </td> 
       <td class="col3">s non metus. Donec auctor ipsum in quam bibendum, sit a</td> 
      </tr> 
     </tbody> 
     </table> 
    </body> 
</html>

出典

2016-05-24 07:27:22 obourgain

おかげで、！ –

テーブルの幅をコンテンツより小さく設定

答えて

関連する問題