Table Element with Flexible Start Columns An example of a Table Element with modified first two column widths. Important Notes: Refer to the Table Element with Headers and Footer page for information on adding the headers and footer.Twig: Use the fixed_width_columns prop to adjust the column widths.HTML: Add a e-bolt-table--fixed-width-columns--first, e-bolt-table--fixed-width-columns--second or e-bolt-table--fixed-width-columns--first-two class to the <table> to adjust the column widths.The fixed_width_table boolean prop will disable the fixed_width_columns column adjustments. Refer to the Table Element with a Fixed Width Layout page for information.The pink table cell backgrounds found on this page are for demonstration purposes only. Demo

Set column widths to be flexible.

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Set the width of the first column to be as wide as the longest text.

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Set the width of the second column to be as wide as the longest text.

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Set the width of the first two columns to be as wide as the longest text.

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Set the width of the first column to be as wide as the longest text (with header).

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Set the width of the second column to be as wide as the longest text (with header).

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Set the width of the first two columns to be as wide as the longest text (with header).

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5

Fixed Width Table Prop Override.

Pts Reb Ast Stl Blk
Michael Jordan 70 10 2 5 1
Toni Kukoc 21 15 10 3 4
Steve Kerr 5 2 20 5 0
Total 91 27 32 13 5
Twig
{% set header %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Prop',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Number',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Description',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Type',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row1 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'attributes',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '1',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '<code>object</code>',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row2 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'headers',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '2',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '<code>object</code>',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row3 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'rows',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '3',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '<code>array</code>',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% set row4 %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'format',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '4',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '<code>string</code>',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% include '@bolt-elements-table/table.twig' with {
  fixed_width_columns: 'first-two',
  header: {
    content: header,
  },
  body: {
    content: [
      row1,
      row2,
      row3,
      row4,
    ],
  },
} only %}
HTML
<table class="e-bolt-table e-bolt-table--fixed-width-columns--first-two">
  <thead>
    <tr>
      <th>
      </th>
      <th>Pts</th>
      <th>Reb</th>
      <th>Ast</th>
      <th>Stl</th>
      <th>Blk</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Michael Jordan</td>
      <td>70</td>
      <td>10</td>
      <td>2</td>
      <td>5</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Toni Kukoc</td>
      <td>21</td>
      <td>15</td>
      <td>10</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Steve Kerr</td>
      <td>5</td>
      <td>2</td>
      <td>20</td>
      <td>5</td>
      <td>0</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>91</td>
      <td>27</td>
      <td>32</td>
      <td>13</td>
      <td>5</td>
    </tr>
  </tfoot>
</table>