Table column width Use inline style on the table header cells to set a specific column width. Important Notes: 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, change the table component’s container to block display to render a full width table. Use u-bolt-block utility class or inline style. 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-components-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: '250px wide column',
      header: true,
      attributes: {
        style: 'width: 250px;',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{# Do not set widths for body row cells #}
{% set row %}
  {% set cells %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
    {% include '@bolt-components-table/table-cell.twig' with {
      content: 'This is a regular cell.',
    } only %}
  {% endset %}
  {% include '@bolt-components-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-components-table/table.twig' with {
  header: {
    content: header_percent,
  },
  body: {
    content: [
      row,
    ],
  },
  attributes: {
    class: 'u-bolt-block',
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.