title: DomPDF table fixed column width and break long text
body: <p>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)</p>
  
  <p>Then I set on <code>word-break:break-all;</code> and <code>word-wrap:break-word;</code> on each <code>&lt;td&gt;</code> hoping that the text could fit on the table.</p>
  
  <p>I also set all the <code>&lt;td&gt;</code> / column widths to some specified amount.</p>
  
  <p>I use Laravel's DomPDF wrapper here: <a href="https://github.com/barryvdh/laravel-dompdf" rel="noreferrer">https://github.com/barryvdh/laravel-dompdf</a></p>
  
  <hr>
  
  <p><strong>Case 1:</strong> No <code>table-layout: fixed</code>  </p>
  
  <pre><code>&lt;table class="bordered"&gt;
      &lt;tr class="font-12"&gt;
          &lt;th style="width: 25px"&gt;No&lt;/th&gt;
          &lt;th style="width: 100px"&gt;Nama Alat&lt;/th&gt;
          &lt;th style="width: 25px"&gt;Jml&lt;/th&gt;
          &lt;th style="width: 300px"&gt;Spesifikasi&lt;/th&gt;
          &lt;th style="width: 300px"&gt;Supplier&lt;/th&gt;
          &lt;th style="width: 150px"&gt;Gambar&lt;/th&gt;
      &lt;/tr&gt;
      @foreach ($items as $index =&gt; $item)
      &lt;tr&gt;
          &lt;td style="width: 25px"&gt;{{ ($index+1) }}&lt;/td&gt;
          &lt;td style="width: 100px"&gt;{{ $item['name'] }}&lt;/td&gt;
          &lt;td style="width: 25px"&gt;{{ $item['jumlah_disetujui'] }}&lt;/td&gt;
          &lt;td class="font-12" style="width: 300px; word-break:break-all; word-wrap:break-word;"&gt;
              {!! nl2br( $item['spesifikasi'] ) !!}
          &lt;/td&gt;
          &lt;td class="font-12" style="width: 300px; word-break:break-all; word-wrap:break-word;"&gt;
              {!! nl2br( $item['supplier'] ) !!}
          &lt;/td&gt;
          &lt;td style="width: 150px"&gt;
              @if ($item['image'])
                  &lt;img style="max-height: 125px;" src="{{ $item['image'] }}" /&gt;
              @else
                  -
              @endif
          &lt;/td&gt;
      &lt;/tr&gt;
      @endforeach
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Case 1 PDF Result:</strong>  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).</p>
  
  <p><a href="https://i.stack.imgur.com/Vyvl9.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Vyvl9.jpg" alt="Word-wrap does not work"></a></p>
  
  <hr>
  
  <p><strong>Case 2:</strong> Adding <code>table-layout: fixed</code>  </p>
  
  <pre><code>&lt;table class="bordered" style="table-layout: fixed"&gt; &lt;!-- only added this --&gt;
      &lt;tr class="font-12"&gt;
          &lt;th style="width: 25px"&gt;No&lt;/th&gt;
          &lt;th style="width: 100px"&gt;Nama Alat&lt;/th&gt;
          &lt;th style="width: 25px"&gt;Jml&lt;/th&gt;
          &lt;th style="width: 300px"&gt;Spesifikasi&lt;/th&gt;
          &lt;th style="width: 300px"&gt;Supplier&lt;/th&gt;
          &lt;th style="width: 150px"&gt;Gambar&lt;/th&gt;
      &lt;/tr&gt;
      @foreach ($items as $index =&gt; $item)
      &lt;tr&gt;
          &lt;td style="width: 25px"&gt;{{ ($index+1) }}&lt;/td&gt;
          &lt;td style="width: 100px"&gt;{{ $item['name'] }}&lt;/td&gt;
          &lt;td style="width: 25px"&gt;{{ $item['jumlah_disetujui'] }}&lt;/td&gt;
          &lt;td class="font-12" style="width: 300px; word-break:break-all; word-wrap:break-word;"&gt;
              {!! nl2br( $item['spesifikasi'] ) !!}
          &lt;/td&gt;
          &lt;td class="font-12" style="width: 300px; word-break:break-all; word-wrap:break-word;"&gt;
              {!! nl2br( $item['supplier'] ) !!}
          &lt;/td&gt;
          &lt;td style="width: 150px"&gt;
              @if ($item['image'])
                  &lt;img style="max-height: 125px;" src="{{ $item['image'] }}" /&gt;
              @else
                  -
              @endif
          &lt;/td&gt;
      &lt;/tr&gt;
      @endforeach
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Case 2 PDF Result:</strong> Word-wrap works, but column width has no effect</p>
  
  <p><a href="https://i.stack.imgur.com/BGn9w.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/BGn9w.jpg" alt="Word-wrap works, but column width has no effect"></a></p>
  
  <hr>
  
  <p><strong>What I want is: a table with fixed width columns that has a working word-wrap</strong></p>
  
  <p>Is this impossible to do on DomPDF?<br>
  Any workaround or 'hacks' that can help achieve this?  </p>
  
  <p>Or maybe I should start looking for other / better PDF generators?</p>
  
  <p><em>EDIT:</em><br>
  I also found a lot of Github Issues on this, with no sign of the bug being fixed</p>
  
  <ul>
  <li><a href="https://github.com/dompdf/dompdf/issues/1017" rel="noreferrer">Table cell width is not honored if content exceeds the specified dimensions #1017</a></li>
  <li><a href="https://github.com/dompdf/dompdf/issues/1253" rel="noreferrer">Table widths do not conform to css width attribute. #1253</a></li>
  <li><a href="https://github.com/dompdf/dompdf/issues/1432" rel="noreferrer">Fixed table layout ignored column widths #1432</a></li>
  </ul>