如何将表列用作滑块

Question

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

我只想在slidebar上显示表格的第一列，而不是两者(table和slidebar)。通过点击按钮，表格的第一列应该最小化。

befor toggle

after toggle

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

    <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>
                    </li>
                    <div class="dropdown-divider"></div>
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            <i class="far fa-user"> </i>
                            <p>
                                Theobald
                            </p>
                        </a>
                    </li>
                    <div class="dropdown-divider"></div>
                </ul>
            </nav>
        </div>
    </aside>


        <div class="content" style="overflow: scroll; padding: 10px">
            <div class="container-fluid">
                <div class="row">
                    <div>
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <td>Name</td>
                                    <td>AAAAAAAAAAAAAA</td>
                                    <td>BBBBBBBBBBBBBB</td>
                                    <td>CCCCCCCCCCCCCC</td>
                                    <td>DDDDDDDDDDDDDD</td>
                                    <td>EEEEEEEEEEEEEE</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><i class="far fa-user"> </i>Adelfried</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td><i class="far fa-user"> </i>Kalona</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td><i class="far fa-user"> </i>Raynard</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>

                                </tr>
                                <tr>
                                    <td><i class="far fa-user"> </i>Wesley</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td><i class="far fa-user"> </i>Theobald</td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

Answer 1

如果你只想让你的第一列是可折叠的并且具有不同的样式，你可以完全移除滑块。下面是一个关于如何折叠第一列并设置样式的基本示例：

​

var table = document.getElementById('usertable');

var toggleCollapsed = function(e) {
  if (table.classList.contains('collapsed')) {
    table.classList.remove('collapsed');
  } else {
    table.classList.add('collapsed');
  }
}

table.addEventListener('click', toggleCollapsed)

table td:first-child {
  background-color: black;
  color: white;
}
table td:first-child i {
  margin-right: 5px;
}
table.collapsed td:first-child {
  text-align:center;
}
table.collapsed td:first-child i {
  margin-right: 0;
}
table.collapsed td:first-child .username {
  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">
    <thead>
        <tr>
          <td><span class="username">Name</span></td>
            <td>AAAAAAAAAAAAAA</td>
            <td>BBBBBBBBBBBBBB</td>
            <td>CCCCCCCCCCCCCC</td>
            <td>DDDDDDDDDDDDDD</td>
            <td>EEEEEEEEEEEEEE</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><i class="far fa-user"> </i><span class="username">Adelfried</span></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td><i class="far fa-user"> </i><span class="username">Kalona</span></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td><i class="far fa-user"> </i><span class="username">Raynard</span></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>

        </tr>
        <tr>
            <td><i class="far fa-user"> </i><span class="username">Wesley</span></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td><i class="far fa-user"> </i><span class="username">Theobald</span></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

​