DomPDF 表格固定列宽并打破长文本

Question

I have a table with very long texts that has no spaces (users like to post a full website URL complete with all the parameters)

Then I set on word-break:break-all; and word-wrap:break-word; on each <td> hoping that the text could fit on the table.

I also set all the <td> / column widths to some specified amount.

I use Laravel's DomPDF wrapper here: https://github.com/barryvdh/laravel-dompdf

---

Case 1: No 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>

Case 1 PDF Result: Word-wrap does not work, column width works on cells with few texts, but does not work either on cells that has long texts (needs word-wrap).

---

Case 2: Adding 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>

Case 2 PDF Result: Word-wrap works, but column width has no effect

---

What I want is: a table with fixed width columns that has a working word-wrap

Is this impossible to do on DomPDF?
Any workaround or 'hacks' that can help achieve this?

Or maybe I should start looking for other / better PDF generators?

EDIT:
I also found a lot of Github Issues on this, with no sign of the bug being fixed

• Table cell width is not honored if content exceeds the specified dimensions #1017
• Table widths do not conform to css width attribute. #1253
• Fixed table layout ignored column widths #1432

Answer 1

我用table-layout设置宽度％：固定，它工作正常

Answer 2

Not really an "answer", but my solution is switching to Snappy PDF (used the Laravel Package ).
Worked like a charm, I did not even change the HTML markups.

Answer 3

I had the same problem, I solved it thanks to @Solonka's answer.

Example:

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

Answer 4

Width calculation in DomPDF is problem (td - in mm), but the functional solution is use "border-box":

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

Answer 5

For me this worked:

table{
      max-width: 750px;
}