DomPDF表格固定列宽和折断长文本

Question

我有一个表格，其中有很长的文本，没有空格（用户想发布完整包括所有参数的网站URL）。

然后我在每个上设置了word-break: break-all; 和 word-wrap: break-word;，希望文本能够适应表格。

我还将所有 /列宽度设置为某些指定的数量。

我在这里使用Laravel的DomPDF封装器：https://github.com/barryvdh/laravel-dompdf

---

情况1：没有 table-layout: fixed

<table class="bordered">
    <tr class="font-12">
        <th style="width: 25px">No</th>
        <th style="width: 100px">Nama Alat</th>
        <th style="width: 25px">Jml</th>
        <th style="width: 300px">Spesifikasi</th>
        <th style="width: 300px">Supplier</th>
        <th style="width: 150px">Gambar</th>
    </tr>
    @foreach ($items as $index => $item)
    <tr>
        <td style="width: 25px">{{ ($index+1) }}</td>
        <td style="width: 100px">{{ $item['name'] }}</td>
        <td style="width: 25px">{{ $item['jumlah_disetujui'] }}</td>
        <td class="font-12" style="width: 300px; word-break:break-all; word-wrap:break-word;">
            {!! nl2br( $item['spesifikasi'] ) !!}
        </td>
        <td class="font-12" style="width: 300px; word-break:break-all; word-wrap:break-word;">
            {!! nl2br( $item['supplier'] ) !!}
        </td>
        <td style="width: 150px">
            @if ($item['image'])
                <img style="max-height: 125px;" src="{{ $item['image'] }}" />
            @else
                -
            @endif
        </td>
    </tr>
    @endforeach
</table>

案例1 PDF结果：自动换行不起作用，列宽对于文本较少的单元格有效，但对于具有较长文本（需要自动换行）的单元格也无效。

---

案例2：添加 table-layout: fixed

<table class="bordered" style="table-layout: fixed"> <!-- only added this -->
    <tr class="font-12">
        <th style="width: 25px">No</th>
        <th style="width: 100px">Nama Alat</th>
        <th style="width: 25px">Jml</th>
        <th style="width: 300px">Spesifikasi</th>
        <th style="width: 300px">Supplier</th>
        <th style="width: 150px">Gambar</th>
    </tr>
    @foreach ($items as $index => $item)
    <tr>
        <td style="width: 25px">{{ ($index+1) }}</td>
        <td style="width: 100px">{{ $item['name'] }}</td>
        <td style="width: 25px">{{ $item['jumlah_disetujui'] }}</td>
        <td class="font-12" style="width: 300px; word-break:break-all; word-wrap:break-word;">
            {!! nl2br( $item['spesifikasi'] ) !!}
        </td>
        <td class="font-12" style="width: 300px; word-break:break-all; word-wrap:break-word;">
            {!! nl2br( $item['supplier'] ) !!}
        </td>
        <td style="width: 150px">
            @if ($item['image'])
                <img style="max-height: 125px;" src="{{ $item['image'] }}" />
            @else
                -
            @endif
        </td>
    </tr>
    @endforeach
</table>

案例2 PDF结果：自动换行起作用，但列宽度无效

---

我想要的是：一个具有固定宽度列并具有工作单词换行的表格

在DomPDF上做这个可能吗？
有什么解决方法或“黑客”可以帮助实现这一点吗？

或者我应该开始寻找其他/更好的PDF生成器？

编辑：
我还发现了很多关于此问题的Github问题，没有迹象表明错误已被修复

• 如果内容超出指定尺寸，则不会考虑表格单元格宽度#1017
• 表宽度不符合CSS宽度属性。 #1253
• 忽略固定表布局列宽度#1432

- topher

Answer 1

我使用table-layout:fixed将宽度设置为百分比，效果很好。

- Solonka

Answer 2

我曾遇到相同的问题，多亏了@Solonka的回答，我解决了这个问题。

示例：

<table border="1px" style="table-layout:fixed;">
    <tr>
        <th style="width:5%;">5%</th>
        <th style="width:10%;">10%</th>
        <th style="width:25%;">25%</th>
        <th style="width:60%;">60%</th>
    </tr>
</table>

- Irvıng Ngr

Answer 3

虽然不是一个"答案"，但我的解决方案是切换到Snappy PDF（使用Laravel包）。
非常好用，我甚至没有改变HTML标记。

- topher

Answer 4

对我来说这个有效：

table{
      max-width: 750px;
}

- Jon

Answer 5

在DomPDF中计算宽度存在问题（以毫米为单位的td），但是功能性解决方案是使用“border-box”：

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

- Libor