如何使用表格列作为滑块

Question

我想建立单页网站。将有一个表格作为主要内容。该表的第一列可以通过按钮切换。

我只想在滑动条上显示表格的第一列，而不是同时显示它们（表格和滑动条）。通过点击按钮，表格的第一列应该被最小化。

我怎样才能实现这个想法？我对前端概念完全陌生，每个答案对我都很重要。

    <aside class="main-sidebar sidebar-dark-primary elevation-4">

        <div class="sidebar">

            <nav class="mt-2">

                <ul class="nav nav-pills nav-sidebar flex-column" 

                data-widget="treeview" role="menu"

                    data-accordion="false">

                    <div>

                        <li class="nav-item">

                            <a href="#" class="nav-link">

                                <i class="far fa-user"> </i>

                                <p>

                                    Adelfried

                                </p>

                            </a>

                        </li>

                    </div>

                    <div class="dropdown-divider"></div>

                    <li class="nav-item">

                        <a href="#" class="nav-link">

                            <i class="far fa-user"> </i>

                            <p>

                                Kalona

                            </p>

                        </a>

                    </li>

                    <div class="dropdown-divider"></div>

                    <li class="nav-item">

                        <a href="#" class="nav-link">

                            <i class="far fa-user"> </i>

                            <p>

                                Raynard

                            </p>

                        </a>

                    </li>

                    <div class="dropdown-divider"></div>

                    <li class="nav-item">

                        <a href="#" class="nav-link">

                            <i class="far fa-user"> </i>

                            <p>

                                Wesley

                            </p>

                        </a>

Answer 1

如果您只是希望第一列可折叠并具有不同的样式，则可以完全移除滑块。这是一个关于如何折叠第一列并为其设置样式的基本示例：var table = document.getElementById('usertable');var toggleCollapsed = function(e) {&nbsp; if (table.classList.contains('collapsed')) {&nbsp; &nbsp; table.classList.remove('collapsed');&nbsp; } else {&nbsp; &nbsp; table.classList.add('collapsed');&nbsp; }}table.addEventListener('click', toggleCollapsed)table td:first-child {&nbsp; background-color: black;&nbsp; color: white;}table td:first-child i {&nbsp; margin-right: 5px;}table.collapsed td:first-child {&nbsp; text-align:center;}table.collapsed td:first-child i {&nbsp; margin-right: 0;}table.collapsed td:first-child .username {&nbsp; display: none;}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/><table id="usertable" class="table table-striped table-bordered table-hover">&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><span class="username">Name</span></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>AAAAAAAAAAAAAA</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>BBBBBBBBBBBBBB</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>CCCCCCCCCCCCCC</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>DDDDDDDDDDDDDD</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>EEEEEEEEEEEEEE</td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><i class="far fa-user"> </i><span class="username">Adelfried</span></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><i class="far fa-user"> </i><span class="username">Kalona</span></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><i class="far fa-user"> </i><span class="username">Raynard</span></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><i class="far fa-user"> </i><span class="username">Wesley</span></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><i class="far fa-user"> </i><span class="username">Theobald</span></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody></table>