Как использовать столбец таблицы в качестве слайдера

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>
                    </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>