Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 13048, member: 3917"]
Kurze und schnelle Lösung: Dem div, das die Tabelle und die Überschrift umschließt, eine Klasse geben, z. B. "table-wrapper" und dann ein [ICODE]margin-left[/ICODE]: 
[CODE]        .wrapper-table {
            margin-left: 220px;
        }
[/CODE]

Etwas eleganter: Die Nav und den Container mit der Tabelle ohne Bootstrap nebeneinander anordnen und den Container scrollbar machen. Dann kommt man ohne [ICODE]position: fixed;[/ICODE]  aus:
[CODE]<!doctype html>
<html lang="en">

.sidebar .active {
            border-radius: 5px;
            box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
        }

@media (max-width: 767px) {
            .sidebar {
                padding: 120px 0 0;
            }
        }

html,
        body {
            height: 100%;
        }

body {
            display: flex;
        }

main {
            flex: 1;
            overflow-y: auto;
        }

.main-inner {
            /* Nur um den Container zum Test zu vergrößern
            und sichtbar zu machen: */
            background-color: lightblue;
            height: 200vh;
        }
    </style>

</head>

<body>
    <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="pt-3">
            <ul class="nav flex-column">
                <li class="nav-item">
                    {% if app.request.get('_route') == 'app_dashboard' %}
                    <a class="nav-link active" aria-current="page" href="{{ path('app_dashboard') }}">
                        <span data-feather="home"></span>
                        Test
                    </a>
                    {% else %}
                    <a class="nav-link" aria-current="page" href="{{ path('app_dashboard') }}">
                        <span data-feather="home"></span>
                        Test
                    </a>
                    {% endif %}

</li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <span data-feather="file-plus"></span>
                        Test
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <span data-feather="slash"></span>
                        Test
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <span data-feather="users"></span>
                        Test
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <main>
        <section class="main-inner">
            <h2>Test:</h2>
            <br>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Test</th>
                        <th>Test</th>
                        <th>Test</th>
                        <th>Test</th>
                        <th>Test</th>
                        <th>Test</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                        <td>
                            Test
                        </td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
</body>

</html>[/CODE]Die Nav und den Container mit der Tabelle bzw. was sonst noch darin ist, kannst Du ja weiterhin mit Bootstrap stylen.
[/QUOTE]

Authentifizierung