设置表格列宽度小于内容

Question

设置表格列宽度小于内容

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

Run Code Online (Sandbox Code Playgroud)

显然，如果内容增长到列宽之上，这不会限制列宽。该模板在 Chrome 和 Firefox 中看起来不错，但在生成的 PDF 中则不然。

有没有办法限制飞碟PDF每列的宽度？

Answer 1

obo*_*ain 5

您可以将以下样式添加到表中：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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，5 月前
查看次数：	2333 次
最近记录：	9 年，5 月前