Table Element with Column Width Use inline style on the table header cells to set a specific column width. Important Notes: Refer to the Table Element with Top Header page for information on adding a top header. Column width should be set on the table header cells in the table head rather than any other regular table cells. CSS width and min-width have different effects on table column widths, experiment and pick one that works for a particular use case. Since table is not forced to be full width by default, use the Full Width Table layout. Refer to the Table Element with Full Width Display page for information on this prop. Take a look at real examples of tables currently on our sites. Demo Pixel value width
250px wide column 250px wide column 250px wide column 250px wide column
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
Percent value width
15% wide column 25% wide column 45% wide column 15% wide column
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
Percent value width + full width table container (block display)
15% wide column 25% wide column 45% wide column 15% wide column
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
This is a regular cell. This is a regular cell. This is a regular cell. This is a regular cell.
Twig
{# Use inline style to set a width on a table header cell #}
{% set header_250px %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{# Do not set widths for body row cells #}
{% set row %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{# Change the table component's container to block display to render a full width table #}
{% include '@bolt-elements-table/table.twig' with {
  header: {
    content: header_percent,
  },
  body: {
    content: [
      row,
    ],
  },
  attributes: {
    class: 'u-bolt-block',
  },
} only %}
HTML
<table class="e-bolt-table">
  <thead>
    <tr>
      <th style="width: 250px;">250px wide column</th>
      <th style="width: 250px;">250px wide column</th>
      <th style="width: 250px;">250px wide column</th>
      <th style="width: 250px;">250px wide column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td> This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
    <tr>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
      <td>This is a regular cell.</td>
    </tr>
  </tbody>
</table>