FreeMarker模板中字符串过长如何灵活调整列宽？答案

【问题标题】：How to flexible adjust the width of a column if the string is too long in FreeMarker template?FreeMarker模板中字符串过长如何灵活调整列宽？
【发布时间】：2019-05-23 12:59:33
【问题描述】：

我遇到了使用 FreeMarker for NetSuite 设计 PDF 模板的问题。该模板有一列标题为“序列号”。

模板中的代码如下：

<table class="itemtable">
    <#list record.item as item>
        <#if item_index==0>
            <thead>
                <tr valign="top">
                    <th colspan="1">#</th>
                    <th colspan="4">${item.item@label}</th>
                    <th align="left">${item.quantity@label}</th>
                    <th align="left">${item.description@label}</th>
                    <th align="left">${item.serial_num@label}</th>
                </tr>
            </thead>
        </#if>
        <tr>
            <td colspan="1">${item_index+1}</td>
            <td colspan="4">${item.item}</td>
            <td align="right">${item.quantity}</td>
            <td align="left">${item.description}</td>
            <td align="left">${item.serial_num}</td>
        </tr>
    </#list>
</table>

如果序列号的长度小于其标题“序列号”的标题，则列宽不会改变。

但是如果序列号（例如 AB-795-1245-SER-572）的长度比其标题的标题（序列号）长，那么列的宽度应该扩展以显示整个值（AB- 795-1245-SER-572）在一行中（没有换行符）。

但是，目前，即使值比标题长，宽度也不会改变。我不知道它的CSS，有人能给我建议吗？谢谢！

更新：说明

现在问题改如下：

第三列应根据值的长度动态扩展，并与第二列有固定的间隔。

第二列的宽度是固定的。并且表格应该向右对齐。

<table style="margin-top: 10px;">
    <tr>
        <td></td>
        <td align="right">SubTotal</td>
        <td align="right">${subtotal}</td>
    </tr>
    <tr>
        <td></td>
        <td align="right">Tax</td>
        <td align="right">${tax}</td>
    </tr>
    <tr>
        <td></td>
        <td align="right">Total</td>
        <td align="right">${total}</td>
    </tr>
</table>

我们应该如何实现它？使用“colspan”属性是个好主意吗？

【问题讨论】：

标签： html css templates netsuite freemarker

【解决方案1】：

你可以试试 CSS 的“空白”属性。

<table class="itemtable">
    <#list record.item as item>
        <#if item_index==0>
            <thead>
                <tr valign="top">
                    <th colspan="1">#</th>
                    <th colspan="4">${item.item@label}</th>
                    <th align="left">${item.quantity@label}</th>
                    <th align="left">${item.description@label}</th>
                    <th align="left">${item.serial_num@label}</th>
                </tr>
            </thead>
        </#if>
        <tr>
            <td colspan="1">${item_index+1}</td>
            <td colspan="4">${item.item}</td>
            <td align="right">${item.quantity}</td>
            <td align="left">${item.description}</td>
            <td style="white-space: nowrap;" align="left">${item.serial_num}</td>
        </tr>
    </#list>
</table>

更新：示例

当我将它添加到我的模板时：

<table>
    <thead>
        <tr valign="top">
            <th colspan="1">#</th>
            <th colspan="4">Item</th>
            <th align="left">Quantity</th>
            <th align="left">Description</th>
            <th align="left">Serial Num</th>
        </tr>
    </thead>
    <tr>
        <td colspan="1">1</td>
        <td colspan="4">Item A</td>
        <td align="right">200</td>
        <td align="left">asdf asdfasdfasdf asdf asdf asdfasdfasdf asdf asdf asdfasdfasdf asdf asdf asdfasdfasdf asdf</td>
        <td style="white-space: nowrap;" align="left">AB-795-1245-SER-572 AB-795-1245-SER-572</td>
    </tr>
</table>

我明白了：

【讨论】：

它对我有用。我添加了我用来回答的示例。
您好 user3075978，问题已更改。