Tabellen

Es werden reguläre Bootstrap-Tabellen verwendet, die über die üblichen Helfer angepasst werden können.

Einzige Ergänzungen sind .table-row-child zum Einrücken einer Zeile sowie .table-row-actions zur Formatierung von Zeilenaktionen.

Beispiel 2 und 4 zeigt lediglich noch das Zusammenspiel mit anderen Komponenten und diverse Anpassungen durch Helferklassen.

Fixierte Kopfzeile

Um die Kopfzeile fixieren zu können, benötigt die Tabelle einen Container mit .fixed-header-table. Dieser muss wiederum mit einer festen Höhe versehen werden. Im Beispiel wurde .vh-25 verwendet.

.table {
    font-size: $font-size-lg;
    margin: 0;

    caption {
        padding-top: $spacer * 1.5;
        text-align: right;

        .color-legend + .color-legend {
            margin-left: $spacer * 3;
        }
    }

    tbody tr {
        border-bottom: 1px dotted rgba($primary, .5);
    }

    th,
    td {
        border: none;
    }

    th {
        color: $form-label-color;
        font-size: $form-label-font-size;
        font-weight: normal;
    }

    &:not(.table-sm) {

        th:first-child,
        td:first-child {
            padding-left: 0;
        }

        th:last-child,
        td:last-child {
            padding-right: 0;
        }
    }

    .progress-stacked {
        display: inline-flex;
        position: relative;
        vertical-align: top;
        width: 200px;
    }
}

.table-sm {
    font-size: $font-size-base;

    th {
        background-color: $gray-400;
        color: $primary;
        font-size: $font-size-base;
        font-weight: 700;
    }
}

.table .table-row-child,
.advanced-table .table-row-child {

    > th:first-child,
    > td:first-child {
        padding-left: $spacer * 2;
    }
}

.table-row-actions {
    text-align: right;
    white-space: nowrap;

    a,
    button {
        appearance: none;
        background: none;
        border: none;
        color: $primary;
        display: inline-block;
        padding: 0;
        margin: 0;
        text-decoration: none;

        .ti {
            display: block;
        }

        &:not(:first-child) {
            margin-left: $spacer;
        }
    }
}

.fixed-header-table {
    overflow: auto;

    th {
        position: sticky;
        top: 0;
    }
}

.advanced-table {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    width: 100%;

    caption {
        padding-top: $spacer * 1.5;
        text-align: right;

        .color-legend {
            font-size: $font-size-base;
        }

        .color-legend + .color-legend {
            margin-left: $spacer * 3;
        }
    }

    th,
    td {
        border-left: 1px solid $primary;
        border-right: 1px solid $primary;
        line-height: 1.2;
        padding: ($spacer * .75) $spacer;
        text-align: left;
        word-break: keep-all;

        &:first-child {
            border-left: none;
        }

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

    th {
        font-family: 'Roboto Condensed', sans-serif;
        // 15px; we don't use that anywhere else but we were running out of space on some tables.
        font-size: $font-size-base * 1.07142857;
        font-weight: 500;
    }

    thead {
        background-color: $gray-100;
        border-bottom: 1px solid $primary;

        th {
            text-align: center;

            &:first-child {
                text-align: left;
            }
        }
    }

    &__primary-scope th {
        color: $primary;
        font-weight: 500;
    }

    &__secondary-scope th {
        color: $form-label-color;
        font-family: $font-family-base;
        font-size: $form-label-font-size;
        font-weight: normal;
    }

    tbody {

        tr {
            border-bottom: 1px solid $primary;
        }

        th {
            font-weight: 500 !important;
            text-align-last: left;

            &[scope="row"] {
                padding-bottom: $spacer * 1.5;
                padding-top: $spacer * 1.5;
            }
        }

        & + tbody {

            tr:first-child th,
            tr:first-child td {
                border-top: 2px solid $primary;
            }
        }
    }
}

Varianten

Standard

Accountname Standort Beziehung Stakeholder Telefonnummer
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
<table class="table">
    <thead>
        <tr>
            <th scope="col">Accountname</th>
            <th scope="col">Standort</th>
            <th scope="col">Beziehung Stakeholder</th>
            <th scope="col">Telefonnummer</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <a href="#">Unternehmensname Firma A</a>
            </td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr class="table-row-child">
            <td>
                <a href="#">Unternehmensname Firma A</a>
            </td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr class="table-row-child">
            <td>
                <a href="#">Unternehmensname Firma A</a>
            </td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>
                <a href="#">Unternehmensname Firma A</a>
            </td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
    </tbody>
</table>

Standard + erweiterte Inhalte

Wesentlich Unwesentlich Offen
Jahr Unternehmen Wirtschaftsjahr Start Wirtschaftsjahr Ende Fortschritt Status  
2024 Unternehmensname Firma A 31.03.2025 16.05.2025 100%
Abgeschlossen
2024 Unternehmensname Firma A 31.03.2025 16.05.2025 75% In Arbeit
2024 Unternehmensname Firma A 31.03.2025 16.05.2025 35% Überfällig
<table class="table">
    <caption>
        <span class="color-legend color-legend-material">Wesentlich</span>
        <span class="color-legend color-legend-not-material">Unwesentlich</span>
        <span class="color-legend color-legend-open-material">Offen</span>
    </caption>
    <thead>
        <tr>
            <th scope="col">Jahr</th>
            <th scope="col">Unternehmen</th>
            <th scope="col">Wirtschaftsjahr Start</th>
            <th scope="col">Wirtschaftsjahr Ende</th>
            <th scope="col">Fortschritt</th>
            <th scope="col">Status</th>
            <th scope="col">&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2024</td>
            <td>Unternehmensname Firma A</td>
            <td>31.03.2025</td>
            <td>16.05.2025</td>
            <td class="text-success text-nowrap">
                100%
                <div class="progress-stacked ms-3">
                    <div class="progress" role="progressbar" aria-label="Wesentlich" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%" data-bs-toggle="tooltip" data-bs-title="12 Aspekte">
                        <div class="progress-bar bg-material"></div>
                    </div>
                    <div class="progress" role="progressbar" aria-label="Unwesentlich" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"  data-bs-toggle="tooltip" data-bs-title="5 Aspekte">
                        <div class="progress-bar bg-not-material"></div>
                    </div>
                    <div class="progress" role="progressbar" aria-label="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"  data-bs-toggle="tooltip" data-bs-title="8 Aspekte">
                        <div class="progress-bar bg-danger"></div>
                    </div>
                </div>
            </td>
            <td class="text-success">Abgeschlossen</td>
            <td class="table-row-actions">
                <a href="#" title="Bearbeiten">
                    <i class="ti ti-user-edit"></i>
                </a>
                <button href="#" title="Bearbeiten">
                    <i class="ti ti-edit"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td>2024</td>
            <td>Unternehmensname Firma A</td>
            <td>31.03.2025</td>
            <td>16.05.2025</td>
            <td class="text-nowrap">75%</td>
            <td>In Arbeit</td>
            <td class="table-row-actions">
                <a href="#" title="Bearbeiten">
                    <i class="ti ti-user-edit"></i>
                </a>
                <button href="#" title="Bearbeiten">
                    <i class="ti ti-edit"></i>
                </button>
            </td>
        </tr>
        <tr>
            <td>2024</td>
            <td>Unternehmensname Firma A</td>
            <td>31.03.2025</td>
            <td>16.05.2025</td>
            <td class="text-warning text-nowrap">35%</td>
            <td class="text-warning">Überfällig</td>
            <td class="table-row-actions">
                <a href="#" title="Bearbeiten">
                    <i class="ti ti-user-edit"></i>
                </a>
                <button href="#" title="Bearbeiten">
                    <i class="ti ti-edit"></i>
                </button>
            </td>
        </tr>
    </tbody>
</table>

Kompakt

Accountname Standort Beziehung Stakeholder Status Telefonnummer  
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 Wesentlich +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 Unwesentlich +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 Offen +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 Wesentlich +49 202 247988-0
<table class="table table-sm">
    <thead>
        <tr>
            <th scope="col">Accountname</th>
            <th scope="col">Standort</th>
            <th scope="col">Beziehung Stakeholder</th>
            <th class="text-center" scope="col">Status</th>
            <th scope="col">Telefonnummer</th>
            <th scope="col">&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td class="text-center">
                <span class="materiality-indicator materiality-indicator--material" title="Wesentlich">
                    Wesentlich
                </span>
            </td>
            <td>+49 202 247988-0</td>
            <td class="table-row-actions">
                <a href="#" title="Bearbeiten">
                    <i class="ti ti-user-edit"></i>
                </a>
                <a href="#" title="Bearbeiten">
                    <i class="ti ti-edit"></i>
                </a>
                <input class="form-check-input" type="checkbox">
            </td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td class="text-center">
                <span class="materiality-indicator materiality-indicator--not-material" title="Unwesentlich">
                    Unwesentlich
                </span>
            </td>
            <td>+49 202 247988-0</td>
            <td class="table-row-actions">
                <a href="#" title="Bearbeiten">
                    <i class="ti ti-user-edit"></i>
                </a>
                <a href="#" title="Bearbeiten">
                    <i class="ti ti-edit"></i>
                </a>
                <input class="form-check-input" type="checkbox">
            </td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td class="text-center">
                <span class="materiality-indicator materiality-indicator--open-material" title="Offen">
                    Offen
                </span>
            </td>
            <td>+49 202 247988-0</td>
            <td class="table-row-actions">
                <a href="#" title="Bearbeiten">
                    <i class="ti ti-user-edit"></i>
                </a>
                <a href="#" title="Bearbeiten">
                    <i class="ti ti-edit"></i>
                </a>
                <input class="form-check-input" type="checkbox">
            </td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td class="text-center">
                <span class="materiality-indicator materiality-indicator--material" title="Wesentlich">
                    Wesentlich
                </span>
            </td>
            <td>+49 202 247988-0</td>
            <td class="table-row-actions">
                <a href="#" title="Bearbeiten">
                    <i class="ti ti-user-edit"></i>
                </a>
                <a href="#" title="Bearbeiten">
                    <i class="ti ti-edit"></i>
                </a>
                <input class="form-check-input" type="checkbox">
            </td>
        </tr>
    </tbody>
</table>

Fixierte Kopfzeile

Accountname Standort Beziehung Stakeholder Telefonnummer
Unternehmensname Firma AAA 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma AA 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
<div class="fixed-header-table vh-25">
    <table class="table table-sm">
        <thead>
        <tr>
            <th scope="col">Accountname</th>
            <th scope="col">Standort</th>
            <th scope="col">Beziehung Stakeholder</th>
            <th scope="col">Telefonnummer</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Unternehmensname Firma AAA</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma AA</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        </tbody>
    </table>
</div>

Gestreift + aktiv + Zeile hervorheben

Accountname Standort Beziehung Stakeholder Telefonnummer
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Accountname Standort Beziehung Stakeholder Telefonnummer
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
Unternehmensname Firma A 42349 Wuppertal extern 2024; 2025 +49 202 247988-0
<table class="table table-striped table-hover mb-3">
    <thead>
        <tr>
            <th scope="col">Accountname</th>
            <th scope="col">Standort</th>
            <th scope="col">Beziehung Stakeholder</th>
            <th scope="col">Telefonnummer</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr class="table-danger">
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
    </tbody>
</table>

<table class="table table-sm table-striped table-hover">
    <thead>
        <tr>
            <th scope="col">Accountname</th>
            <th scope="col">Standort</th>
            <th scope="col">Beziehung Stakeholder</th>
            <th scope="col">Telefonnummer</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr class="table-success">
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
        <tr>
            <td>Unternehmensname Firma A</td>
            <td>42349 Wuppertal</td>
            <td>extern 2024; 2025</td>
            <td>+49 202 247988-0</td>
        </tr>
    </tbody>
</table>

Erweitert

Stakeholder Interessen Einfluss Betroffenheit
      Positive Auswirkungen negativ Auswirkungen
Lieferant [Interessen] [Einfluss] [positiv] [negativ]
[Interessen] [Einfluss] [positiv] [negativ]
[Interessen] [Einfluss] [positiv] [negativ]
Kunden [Interessen] [Einfluss] [positiv] [negativ]
[Interessen] [Einfluss] [positiv] [negativ]
[Interessen] [Einfluss] [positiv] [negativ]
Mitarbeiter [Interessen] [Einfluss] [positiv] [negativ]
[Interessen] [Einfluss] [positiv] [negativ]
[Interessen] [Einfluss] [positiv] [negativ]
<table class="advanced-table">
    <thead>
        <tr class="advanced-table-list__primary-scope">
            <th scope="col">Stakeholder</th>
            <th scope="col">Interessen</th>
            <th scope="col">Einfluss</th>
            <th scope="col" colspan="2">Betroffenheit</th>
        </tr>
        <tr class="advanced-table__secondary-scope">
            <th scope="col">&nbsp;</th>
            <th scope="col">&nbsp;</th>
            <th scope="col">&nbsp;</th>
            <th scope="col">Positive Auswirkungen</th>
            <th scope="col">negativ Auswirkungen</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" rowspan="3">Lieferant</th>
            <td>[Interessen]</td>
            <td>[Einfluss]</td>
            <td>[positiv]</td>
            <td>[negativ]</td>
        </tr>
        <tr>
            <td>[Interessen]</td>
            <td>[Einfluss]</td>
            <td>[positiv]</td>
            <td>[negativ]</td>
        </tr>
        <tr>
            <td>[Interessen]</td>
            <td>[Einfluss]</td>
            <td>[positiv]</td>
            <td>[negativ]</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th scope="row" rowspan="3">Kunden</th>
            <td>[Interessen]</td>
            <td>[Einfluss]</td>
            <td>[positiv]</td>
            <td>[negativ]</td>
        </tr>
        <tr>
            <td>[Interessen]</td>
            <td>[Einfluss]</td>
            <td>[positiv]</td>
            <td>[negativ]</td>
        </tr>
        <tr>
            <td>[Interessen]</td>
            <td>[Einfluss]</td>
            <td>[positiv]</td>
            <td>[negativ]</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th scope="row" rowspan="3">Mitarbeiter</th>
            <td>[Interessen]</td>
            <td>[Einfluss]</td>
            <td>[positiv]</td>
            <td>[negativ]</td>
        </tr>
        <tr>
            <td>[Interessen]</td>
            <td>[Einfluss]</td>
            <td>[positiv]</td>
            <td>[negativ]</td>
        </tr>
        <tr>
            <td>[Interessen]</td>
            <td>[Einfluss]</td>
            <td>[positiv]</td>
            <td>[negativ]</td>
        </tr>
    </tbody>
</table>