Table Element Borderless An example of a Table Element with no borders between cells.
Important Notes: Refer to the Table Element with Top and Side Headers page for information on adding the headers.Twig: Use the borderless boolean prop to remove the table borders.HTML: Add a e-bolt-table--borderless class to the <table> to remove the table borders.
Demo
Description Team Vehicle Form
Optimus Prime The awe-inspiring leader of the Autobot forces. Selfless and endlessly courageous, he is the complete opposite of his mortal enemy Megatron. Autobots Peterbilt Truck
Bumblebee One of Optimus Prime's most trusted lieutenants. Although he is not the strongest or most powerful of the Autobots, Bumblebee more than makes up for this with a bottomless well of luck, determination and bravery. He would gladly give his life to protect others and stop the Decepticons. Autobots VW Beetle
Twig
{% set header %}
  {% set cells %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: '',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Description',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Team',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Vehicle Form',
      header: true,
    } 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: 'Optimus Prime',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'The awe-inspiring leader of the Autobot forces. Selfless and endlessly courageous, he is the complete opposite of his mortal enemy Megatron.',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Autobots',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Peterbilt Truck',
    } 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: 'Bumblebee',
      header: true,
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'One of Optimus Prime\'s most trusted lieutenants. Although he is not the strongest or most powerful of the Autobots, Bumblebee more than makes up for this with a bottomless well of luck, determination and bravery. He would gladly give his life to protect others and stop the Decepticons.'
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'Autobots',
    } only %}
    {% include '@bolt-elements-table/table-cell.twig' with {
      content: 'VW Beetle',
    } only %}
  {% endset %}
  {% include '@bolt-elements-table/table-row.twig' with {
    content: cells,
  } only %}
{% endset %}

{% include '@bolt-elements-table/table.twig' with {
  borderless: true,
  header: {
    content: header,
  },
  body: {
    content: [
      row1,
      row2
    ],
  },
} only %}
HTML
<table class="e-bolt-table e-bolt-table--borderless">
  <thead>
    <tr>
      <td></td>
      <th>Description</th>
      <th>Team</th>
      <th>Vehicle Form</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Optimus Prime</th>
      <td>The awe-inspiring leader of the Autobot forces. Selfless and endlessly courageous, he is the complete opposite of his mortal enemy Megatron.</td>
      <td>Autobots</td>
      <td>Peterbilt Truck</td>
    </tr>
    <tr>
      <th>Bumblebee</th>
      <td>One of Optimus Prime's most trusted lieutenants. Although he is not the strongest or most powerful of the Autobots, Bumblebee more than makes up for this with a bottomless well of luck, determination and bravery. He would gladly give his life to protect others and stop the Decepticons.</td>
      <td>Autobots</td>
      <td>VW Beetle</td>
    </tr>
  </tbody>
</table>