設置表列寬度小於內容

我在我的Java代碼中使用Flying Saucer PDF生成庫將HTML模板轉換爲PDF。該模板由具有固定列數的表格組成。我希望每列都有固定的寬度，並且其中的內容在溢出時隱藏。我寫的任務下面的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; 
} 
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

謝謝，成功了！ –

設置表列寬度小於內容

回答

相關問題