Basic table

Standard HTML table markup is fully supported, including <thead>, <tbody>, and <tfoot>:

<table>
  <thead>
    <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Widget A</td><td>3</td><td>$9.99</td></tr>
    <tr><td>Widget B</td><td>1</td><td>$24.99</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">Total</td><td>$34.96</td></tr>
  </tfoot>
</table>

Multi-page tables

When a table is taller than a single page, EggPdf paginates it automatically. The <thead> row group repeats at the top of each new page so readers always see the column headings. The <tfoot> row group repeats at the bottom of each page.

ℹ️
To prevent individual rows from being split across a page boundary, add tr { break-inside: avoid; } to your stylesheet.

CSS styling

All standard table CSS properties are supported. Here is a complete example that produces a clean, professional-looking table with a dark header and alternating row shading:

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
th {
    background: #1e293b;
    color: #fff;
    text-align: left;
    padding: 10px 14px;
    font-weight: 600;
}
td {
    padding: 9px 14px;
    border-bottom: 1px solid #e2e8f0;
}
/* Zebra rows */
tr:nth-child(even) td { background: #f8fafc; }
/* Keep each row on one page */
tr { break-inside: avoid; }

Column widths

By default the browser's automatic table layout algorithm distributes column widths based on content. Use table-layout: fixed for fully predictable widths driven by <col> elements or explicit width values on cells:

table { table-layout: fixed; width: 100%; }
col.narrow { width: 80px; }
col.wide   { width: 200px; }

Paired HTML:

<table>
  <colgroup>
    <col class="narrow">
    <col class="wide">
  </colgroup>
  <!-- thead / tbody … -->
</table>

colspan and rowspan

Both colspan and rowspan attributes are fully supported. Cells spanning multiple columns or rows render exactly as they do in a browser, including in combination with border-collapse: collapse and table-layout: fixed.

<tr>
  <td colspan="2">Spans two columns</td>
  <td rowspan="3">Spans three rows</td>
</tr>