スペースのない非常に長いテキストを含むテーブルがあります(ユーザーはすべてのパラメーターを含む完全なWebサイトのURLを投稿したい)
次に、Word-break:break-all;
とWord-wrap:break-Word;
を各<td>
に設定し、テキストがテーブルに収まることを期待しました。
また、すべての<td>
/列の幅を指定された値に設定しました。
ここでは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に関する多くの問題が見つかりました。
実際には「答え」ではありませんが、私の解決策は Snappy PDF に切り替えることです(- Laravelパッケージ を使用)。
HTMLマークアップを変更することすらできませんでした。
Table-layout:fixedで幅を%で設定しましたが、うまく機能しました
同じ問題がありましたが、@ 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>