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
I set width in % with table-layout:fixed and it worked fine