<div class="table">
    <table class="table__table">
        <thead class="table__head">
            <tr class="table__head-row">
                <th class="table__head-cell" scope="col">Lorem ipsum</th>
                <th class="table__head-cell" scope="col">Dolor sit amet</th>
                <th class="table__head-cell" scope="col">Lorem ipsum</th>
            </tr>
        </thead>

        <tbody class="table__body">
            <tr class="table__row">

                <td class="table__cell">Lorem ipsum</td>

                <td class="table__cell"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Lorem ipsum</span></a><br><i>Lorem ipsum</i></td>

                <td class="table__cell">Lorem ipsum</td>
            </tr>
            <tr class="table__row">

                <td class="table__cell">Lorem ipsum</td>

                <td class="table__cell"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Lorem ipsum</span></a><br><i>Lorem ipsum</i></td>

                <td class="table__cell">Lorem ipsum</td>
            </tr>
            <tr class="table__row">

                <td class="table__cell">Lorem ipsum</td>

                <td class="table__cell"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Lorem ipsum</span></a><br><i>Lorem ipsum</i></td>

                <td class="table__cell">Lorem ipsum</td>
            </tr>
            <tr class="table__row">

                <td class="table__cell">Lorem ipsum</td>

                <td class="table__cell"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Lorem ipsum</span></a><br><i>Lorem ipsum</i></td>

                <td class="table__cell">Lorem ipsum</td>
            </tr>
            <tr class="table__row">

                <td class="table__cell">Lorem ipsum</td>

                <td class="table__cell"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Lorem ipsum</span></a><br><i>Lorem ipsum</i></td>

                <td class="table__cell">Lorem ipsum</td>
            </tr>
        </tbody>

        <caption class="table__caption">Das ist die Caption</caption>
    </table>
</div>
<div {{ html_attributes({
  id: id ?? false,
  class: 'table',
}, attrs ?? {}) }}>
  <table {{ html_attributes({
    id: id ?? false,
    class: 'table__table',
  }, tableAttrs ?? {}) }}>
    {% if header|default %}
      <thead class="table__head">
        {% set header = header[0] is not iterable ? [header] : header %}
        {% for row in header %}
          <tr class="table__head-row">
            {% for cell in row %}
              <th {{ html_attributes({
                class: 'table__head-cell',
                align: cell.align ?? false,
                width: cell.width ?? false,
                scope: cell.scope ?? 'col',
                colspan: cell.colspan ?? false,
                rowspan: cell.rowspan ?? false,
              }) }}>
                {{- (cell.text ?? cell) | componentize(inline_only=true) -}}
              </th>
            {% endfor %}
          </tr>
        {% endfor %}
      </thead>
    {% endif %}

    <tbody class="table__body">
      {% for row in rows %}
        <tr class="table__row">
          {% for cell in row %}
            {% set tag = cell.headcell|default ? 'th' : 'td' %}

            <{{ tag }} {{ html_attributes({
              class: 'table__cell',
              scope: cell.scope ?? (tag == 'th' ? 'row' : false),
              align: cell.align ?? false,
              colspan: cell.colspan ?? false,
              rowspan: cell.rowspan ?? false,
            }) }}>
              {{- (cell.text ?? cell) | componentize(inline_only=true) -}}
            </{{ tag }}>
          {% endfor %}
        </tr>
      {% endfor %}
    </tbody>

    {% if footer|default %}
      <tfoot class="table__foot">
        {% set footer = footer[0] is not iterable ? [footer] : footer %}
        {% for row in footer %}
          <tr class="table__foot-row">
            {% for cell in row %}
              <th {{ html_attributes({
                class: 'table__foot-cell',
                align: cell.align ?? false,
                width: cell.width ?? false,
                scope: cell.scope ?? 'col',
                colspan: cell.colspan ?? false,
                rowspan: cell.rowspan ?? false,
              }) }}>
                {{- (cell.text ?? cell) | componentize(inline_only=true) -}}
              </th>
            {% endfor %}
          </tr>
        {% endfor %}
      </thead>
    {% endif %}

    {%- if caption|default %}
      <caption class="table__caption">
        {{- caption | componentize(inline_only=true) -}}
      </caption>
    {% endif %}
  </table>
</div>
{
  "header": [
    [
      {
        "text": "Lorem ipsum"
      },
      {
        "text": "Dolor sit amet"
      },
      {
        "text": "Lorem ipsum"
      }
    ]
  ],
  "rows": [
    [
      "Lorem ipsum",
      "<a href=\"#\">Lorem ipsum</a><br /><i>Lorem ipsum</i>",
      "Lorem ipsum"
    ],
    [
      "Lorem ipsum",
      "<a href=\"#\">Lorem ipsum</a><br /><i>Lorem ipsum</i>",
      "Lorem ipsum"
    ],
    [
      "Lorem ipsum",
      "<a href=\"#\">Lorem ipsum</a><br /><i>Lorem ipsum</i>",
      "Lorem ipsum"
    ],
    [
      "Lorem ipsum",
      "<a href=\"#\">Lorem ipsum</a><br /><i>Lorem ipsum</i>",
      "Lorem ipsum"
    ],
    [
      "Lorem ipsum",
      "<a href=\"#\">Lorem ipsum</a><br /><i>Lorem ipsum</i>",
      "Lorem ipsum"
    ]
  ],
  "caption": "Das ist die Caption"
}
  • Content:
    .table {
      border-color: var(--table-border-color, var(--color-steel-700));
      border-radius: var(--table-border-radius, var(--border-radius-small));
      border-style: var(--table-border-style, solid);
      border-width: var(--table-border-width, 1px);
      box-shadow: var(--box-shadow-xxl);
      margin-block: var(--table-margin-block, 0);
      overflow: clip;
    }
    
    .table__table {
      border-collapse: collapse;
      color: var(--table-color, currentColor);
      font-size: var(--table-font-size, 1.6rem);
      inline-size: 100%;
      line-height: var(--table-line-height, var(--line-height-regular));
    }
    
    .table__head-row,
    .table__foot-row {
      background-color: var(--table-header-background-color, var(--color-steel-700));
      color: var(--table-header-color, var(--color-white));
    }
    
    .table__head-cell,
    .table__foot-cell {
      font-size: var(--table-head-font-size, 1.6rem);
      font-weight: var(--table-head-font-weight, var(--font-weight-bold));
    }
    
    .table__head-cell,
    .table__cell,
    .table__foot-cell {
      border-color: var(--table-cell-border-color, transparent);
      border-style: var(--table-cell-border-style, solid);
      border-width: var(--table-cell-border-width, 0);
      padding-block: var(--table-cell-padding-block, 0.8rem);
      padding-inline: var(--table-cell-padding-inline, 1.2rem);
      text-align: start;
      vertical-align: text-top;
    }
    
    .table__row:nth-child(odd) {
      background-color: var(--table-odd-row-background-color, var(--color-gray-100));
    }
    
    .table__caption {
      background-color: var(--table-caption-background-color, var(--color-gray-100));
      border-block-start-color: var(--table-caption-color, var(--color-steel-700));
      border-block-start-style: var(--table-caption-style, solid);
      border-block-start-width: var(--table-caption-width, 1px);
      caption-side: bottom;
      color: var(--table-caption-color, var(--color-steel-700));
      font-size: var(--table-caption-font-size, var(--font-size-caption));
      line-height: var(--table-caption-line-height, var(--line-height-regular));
      padding-block: var(--table-caption-gap, 1.2rem);
      padding-inline: var(--table-caption-padding-inline, 1.2rem);
      text-align: start;
    }
    
  • URL: /components/raw/table/table.scss
  • Filesystem Path: src/components/2-atoms/table/table.scss
  • Size: 2.1 KB

No notes defined.