Auf Thema antworten

Beitrag

[QUOTE="LuiM, post: 13047, member: 4426"]
Hallo zusammen,

ich habe aktuell das Problem, dass meine Tabelle hinter der Sidebar verschwindet.
Die Tabelle sollte eigentlich neben der Sidebar in voller Größe zu sehen sein und responsive sein.
Ich nutze Bootstrap 5.

Wie kann ich das umsetzen, dass die Tabelle responsive ist und neben der Sidebar zu sehen ist?

HTML:
[CODE=html]<div class="container-fluid">
    <div class="col-md-12 col-sm-12">
        <div class="row">
            <div class="col-md-4 col-sm-4">
                <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
                    <div class="position-sticky 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>
            </div>
            <div>
                <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>
            </div>
        </div>
    </div>
</div>[/CODE]

Eigene CSS:

[CODE=css].sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 45px 0 0;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 5%), 0 2px 10px 0 rgb(0 0 0 / 5%);
    width: 220px;
}

.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;
    }
}[/CODE]

Vielen Dank im Voraus.

Falls ihr noch weitere Infos benötigt, bitte Bescheid geben :)
[/QUOTE]

Authentifizierung