Как гибко настроить ширину столбца, если строка слишком длинная в шаблоне FreeMarker?

Question

У меня проблема с разработкой шаблона PDF с FreeMarker для NetSuite.Шаблон имеет столбец с заголовком «Серийный номер».

Код в шаблоне выглядит следующим образом:

<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"?

Answer 1

Вы можете попробовать свойство CSS "white-space".

<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>

Я получаю это: