Table Element with Full Width Display An example of a Table Element with a full width layout.
Important Notes: Refer to the Table Element with Top and Side Headers page for information on adding the side and top headers.Twig: Use the full_width boolean prop to make a table display full width.HTML: Add a e-bolt-table--full-width class to the <table> to make the table display full width.
Demo
Column 1 Column 2 Column 3
Row 1 R1C1 R12 R1C3
Row 2 R2C1 R2C2 R2C3
Row 3 R3C1 R32 R3C3
Twig
{% set header_with_space %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Column 1',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Column 2',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Column 3',
      header: true,
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row1_with_header %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Row 1',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R1C1',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R12',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R1C3',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row2_with_header %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Row 2',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R2C1',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R2C2',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R2C3',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row3_with_header %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Row 3',
      header: true
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R3C1',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R32',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'R3C3',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% include '@bolt-elements-table/table.twig' with {
  full_width: true,
  header: {
    content: header_with_space
  },
  body: {
    content: [
      row1_with_header,
      row2_with_header,
      row3_with_header
    ],
  },
} only %}
HTML
<table class="e-bolt-table e-bolt-table--full-width">
  <thead>
    <tr>
      <th>
      </th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>R1C1</td>
      <td>R12</td>
      <td>R1C3</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>R2C1</td>
      <td>R2C2</td>
      <td>R2C3</td>
    </tr>
    <tr>
      <th>Row 3</th>
      <td>R3C1</td>
      <td>R32</td>
      <td>R3C3</td>
    </tr>
  </tbody>
</table>