Table: Scope Row

Ready

HTML
View
Context
Assets
Info
Notes


        
        <table class="table table--scope-row" tabindex="0" role="table">
    <caption class="table__caption">
        This is a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside
    </caption>
    <tbody>
        <tr role="row">
            <th class="" data-th="Example heading:" scope="row" role="rowheader">
                Example content
            </th>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
        </tr>
        <tr role="row">
            <th class="" data-th="Example heading:" scope="row" role="rowheader">
                Example content
            </th>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
        </tr>
        <tr role="row">
            <th class="" data-th="Example heading:" scope="row" role="rowheader">
                Example content
            </th>
            <td class="" data-th="Example heading:" role="gridcell">
                Example content
            </td>
        </tr>
    </tbody>
</table>


        <table
    class="table {{ class }}"
    tabindex="0"
    role="table"
    {{{ additionalAttributes }}}
>
    {{#if captionText}}
        <caption class="table__caption">
            {{ captionText }}
        </caption>
    {{/if}}
    {{#each mainTags }}
        <{{{ mainTag }}} {{{mainAttributes}}}>
            {{#each rowTags}}
                <{{{ rowTag }}} {{{ rowTagAttributes }}}>
                    {{#each childTags}}
                        <{{{ childTag }}}
                             class="{{ childTagClasses }}"
                             {{{ childTagAttributes }}}
                        >
                            {{#if contentVisuallyHidden}}
                                <span class="table__visually-hidden">
                                    {{{ content }}}
                                </span>
                            {{else}}
                                {{#if contentComponent}}
                                    {{ render (component contentComponent) contentContext }}
                                {{else}}
                                    {{{ content }}}
                                {{/if}}
                            {{/if}}
                        </{{{ childTag }}}>
                    {{/each}}
                </{{{ rowTag }}}>
            {{/each}}
        </{{{ mainTag }}}>
    {{/each}}
</table>


        
            
            {
  "captionText": "This is a table. Binded text in caption should explain what kind of data this table presents. Can be also a longer text with inline HTML elements inside",
  "mainTags": [
    {
      "mainTag": "tbody",
      "rowTags": [
        {
          "rowTag": "tr",
          "rowTagAttributes": "role=\"row\"",
          "childTags": [
            {
              "childTag": "th",
              "childTagAttributes": "data-th=\"Example heading:\" scope=\"row\" role=\"rowheader\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            }
          ]
        },
        {
          "rowTag": "tr",
          "rowTagAttributes": "role=\"row\"",
          "childTags": [
            {
              "childTag": "th",
              "childTagAttributes": "data-th=\"Example heading:\" scope=\"row\" role=\"rowheader\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            }
          ]
        },
        {
          "rowTag": "tr",
          "rowTagAttributes": "role=\"row\"",
          "childTags": [
            {
              "childTag": "th",
              "childTagAttributes": "data-th=\"Example heading:\" scope=\"row\" role=\"rowheader\"",
              "content": "Example content"
            },
            {
              "childTag": "td",
              "childTagAttributes": "data-th=\"Example heading:\" role=\"gridcell\"",
              "content": "Example content"
            }
          ]
        }
      ]
    }
  ],
  "class": "table--scope-row"
}

File:

Content:


                                // Table
$table__width                        : 100% !default;
$table__padding                      : 0 !default;
$table__background                   : $white !default;
$table__margin                       : $spacer 0 !default;
$table__border                       : $border-width-base $border-style-base $gray-light !default;
$table__border-radius                : $border-radius !default;
$table__border-collapse              : separate !default;
$table__border-spacing               : 0 !default;
$table__color                        : $black !default;
$table__line-height                  : $font-line-height !default;
$table__font-size                    : $font-size-base !default;
$table__font-size\@medium            : $font-size-medium !default;

// Clean variant
$table__th-font-weight--clean        : $font-weight-bold !default;
$table__th-background--clean         : transparent !default;
$table__background-odd--clean        : $gray-lighter !default;
$table__background-even--clean       : $white !default;

// Table heading
$table__th-background                : $gray-lightest !default;
$table__th-padding                   : 0 !default;
$table__th-padding\@medium           : $spacer--medium !default;
$table__th-border-bottom\@medium     : $table__border !default;
$table__th-border-right\@medium      : $table__border !default;
$table__th-text-align                : left !default;
$table__th-background-row            : $white !default;
$table__th-padding-row               : $spacer--medium !default;
$table__th-border-width-row          : 1px 0 !default;
$table__th-text-align-row            : left !default;
$table__th-width-row                 : 50% !default;

// Table data
$table__td-background                : $white !default;
$table__td-padding                   : $spacer $spacer--medium !default;
$table__td-padding\@medium           : $spacer--medium !default;
$table__td-border-bottom\@medium     : $table__border !default;
$table__td-border-right\@medium      : $table__border !default;
$table__td-font-weight-before        : bold !default;
$table__td-margin-right-before       : $spacer !default;
$table__td-width-before              : 25% !default;
$table__td-max-width-before          : 25% !default;

// Table row
$table__tr-padding                   : $spacer--medium 0 !default;
$table__tr-padding\@medium           : 0 !default;
$table__tr-border-bottom             : $table__border !default;
$table__tr-border-bottom\@medium     : 0 !default;

// Table footer
$table__tfoot-background             : $gray-lightest !default;
$table__tfoot-td-padding             : $spacer $spacer--medium !default;
$table__tfoot-td-padding\@medium     : $spacer--medium !default;
$table__tfoot-td-background          : $table__background !default;
$table__tfoot-td-background\@medium  : $table__background !default;
$table__tfoot-td-border-right\@medium: $table__border !default;

// Odd even variant
$table__background-odd--odd-even                             : $white !default;
$table__background-even--odd-even                            : $gray-lighter !default;
$table__td-background--odd-even                              : transparent !default;
$table__border-top-left-radius-first-child--odd-even         : 0 !default;
$table__border-top-left-radius-first-child--odd-even\@medium : 0 !default;
$table__border-top-right-radius-first-child--odd-even        : 0 !default;
$table__border-top-right-radius-first-child--odd-even\@medium: 0 !default;

// Scope row variant
$table__tr-padding--scope-row                                : 0 !default;
$table__border-width--scope-row                              : 1px 0 0 0 !default;
$table__tr-background-odd--scope-row                         : $table__background-even--odd-even !default;
$table__th-font-wieght--scope-row                            : $font-weight-normal !default;

URL: /components/raw/table/_table-variables.scss
Filesystem Path: build/components/Molecules/table/_table-variables.scss
Size: 3.9 KB

Content:


                                @import 'table-variables';

.table {
    width: $table__width;
    margin: $table__margin;
    padding: $table__padding;
    background: $table__background;
    border: $table__border;
    border-radius: $table__border-radius;
    border-collapse: $table__border-collapse;
    border-spacing: $table__border-spacing;
    color: $table__color;
    font-size: $table__font-size;
    line-height: $table__line-height;

    @include mq($screen-m) {
        font-size: $table__font-size\@medium;
    }

    &--odd-even {
        tbody {
            tr {
                &:nth-child(odd) {
                    background: $table__background-odd--odd-even;
                }

                &:nth-child(even) {
                    background: $table__background-even--odd-even;
                }

                &:first-child {
                    border-top-left-radius: $table__border-top-left-radius-first-child--odd-even;
                    border-top-right-radius: $table__border-top-right-radius-first-child--odd-even;

                    @include mq($screen-m) {
                        border-top-left-radius: $table__border-top-left-radius-first-child--odd-even\@medium;
                        border-top-right-radius: $table__border-top-right-radius-first-child--odd-even\@medium;
                    }
                }
            }

            td {
                background-color: $table__td-background--odd-even;
            }
        }
    }

    &--clean {
        margin: 0;
        border: 0;
        border-radius: 0;

        thead {
            tr {
                padding: 0;
                border-bottom: 0;
            }
        }

        th {
            border-bottom: 0;
            border-right: 0;
            background: $table__th-background--clean;
            text-align: left;
            font-weight: $table__th-font-weight--clean;
        }

        td {
            border-bottom: 0;
            border-right: 0;
            background: $table__th-background--clean;
        }

        tbody {
            tr {
                &:nth-child(odd) {
                    background: $table__background-odd--clean;
                }

                &:nth-child(even) {
                    background: $table__background-even--clean;
                }
            }
        }
    }

    &--scope-row {
        border-width: $table__border-width--scope-row;

        tbody {
            tr {
                padding: $table__tr-padding--scope-row;

                &:nth-child(odd) {
                    th[scope="row"],
                    td {
                        background-color: $table__tr-background-odd--scope-row;
                    }
                }
                @include mq($screen-s) {
                    th {
                        &[scope="row"] + td {
                            &:before {
                                margin-bottom: 0;
                            }
                        }
                    }
                }
            }

            th {
                font-weight: $table__th-font-wieght--scope-row;
            }
        }
    }

    &__caption,
    &__visually-hidden {
        @include visually-hidden();
    }

    &__heading-wrapper {
        display: flex;
        align-items: center;
    }

    tr {
        display: block;
        padding: $table__tr-padding;
        border-bottom: $table__tr-border-bottom;

        @include mq($screen-m) {
            display: table-row;
            padding: $table__tr-padding\@medium;
            border-bottom: $table__tr-border-bottom\@medium;
        }
    }

    th {
        display: none;
        padding: $table__th-padding;
        background: $table__th-background;
        text-align: $table__th-text-align;

        @include mq($screen-m) {
            display: table-cell;
            padding: $table__th-padding\@medium;
            border-bottom: $table__th-border-bottom\@medium;
            border-right: $table__th-border-right\@medium;
        }

        &:last-child {
            border-right: 0;
        }

        &[scope="row"] {
            padding: $table__th-padding-row;
            border-width: $table__th-border-width-row;
            background: $table__th-background-row;
            text-align: $table__th-text-align-row;
            width: $table__th-width-row;

            & + td {
                flex-flow: column nowrap;
                padding: $spacer--medium;

                @include mq($screen-s) {
                    flex-flow: row nowrap;
                }

                &:before {
                    max-width: 100%;
                    width: 100%;
                    margin-bottom: $spacer;

                    @include mq($screen-s) {
                        max-width: 50%;
                        width: 50%;
                    }
                }
            }
        }

    }

    td {
        display: flex;
        padding: $table__td-padding;
        background: $table__td-background;

        &:before {
            display: block;
            content: attr(data-th);
            font-weight: $table__td-font-weight-before;
            margin-right: $table__td-margin-right-before;
            max-width: $table__td-max-width-before;
            width: $table__td-width-before;
            min-width: $table__td-width-before;

            @include mq($screen-m) {
                display: none;
            }
        }

        &:last-child {
            @include mq($screen-m) {
                border-right: 0;
            }
        }

        @include mq($screen-m) {
            display: table-cell;
            padding: $table__td-padding\@medium;
            border-bottom: $table__td-border-bottom\@medium;
            border-right: $table__td-border-right\@medium;
        }
    }

    thead {
        tr {
            padding: 0;
            border-bottom: 0;

            @include mq($screen-m) {
                border-top-left-radius: $table__border-radius;
                border-top-right-radius: $table__border-radius;
            }
        }

        th {
            &:first-child {
                @include mq($screen-m) {
                    border-top-left-radius: $table__border-radius;
                }
            }

            &:last-child {
                @include mq($screen-m) {
                    border-top-right-radius: $table__border-radius;
                }
            }
        }
    }

    tbody {
        tr {
            &:last-child {
                td {
                    &:first-child {
                        @include mq($screen-m) {
                            border-bottom-left-radius: $table__border-radius;
                        }
                    }

                    &:last-child {
                        @include mq($screen-m) {
                            border-bottom-right-radius: $table__border-radius;
                        }
                    }
                }
            }
        }
    }

    tfoot {
        tr {
            &:last-child {
                border-bottom: 0;

                td {
                    border-bottom: 0;

                    &:first-child {
                        @include mq($screen-m) {
                            border-bottom-left-radius: $table__border-radius;
                        }
                    }

                    &:last-child {
                        @include mq($screen-m) {
                            border-bottom-right-radius: $table__border-radius;
                        }
                    }
                }
            }
        }

        td {
            display: block;
            padding: $table__tfoot-td-padding;
            background: $table__tfoot-td-background;

            @include mq($screen-m) {
                display: table-cell;
                padding: $table__tfoot-td-padding\@medium;
                background: $table__tfoot-td-background\@medium;
                border-right: $table__tfoot-td-border-right\@medium;
            }
        }
    }
}

URL: /components/raw/table/_table.scss
Filesystem Path: build/components/Molecules/table/_table.scss
Size: 8 KB

Handle: @table--scope-row
Variants (3): Default , Odd Even , Scope Row
Preview:
- With layout
- Component only
Filesystem Path: build/components/Molecules/table/table.hbs

Tables accessibility

Use table semantics elements: table, tbody, tr, th, td
Use scope="col" or scope="row" for table headings (th elements)
use capion element to describe what kind of data are presented in the table
To make mobile table accessible, please add apropriate aria roles:
- role="columnheader" for th elements
- role="row" for row elements
- role="gridcell" for td elements

In desktop mode (wide screens) HTML5 tags are sufficient to make HTML table accessible. However, we change display mode on small screen to set our table visible without horizontal scrolling, so we need to ad apropriate aria roles to make it focusable and well read by AT.