除非滚动，否则如何使侧边栏在表格中保持在左侧？（纯 CSS）答案

【问题标题】：How to make the side-bar stick to left in table unless scrolled? (pure CSS)除非滚动，否则如何使侧边栏在表格中保持在左侧？（纯 CSS）
【发布时间】：2016-06-18 01:30:52
【问题描述】：

我正在尝试创建一个表格，如果用户自上而下滚动，标题将保持不变，如果用户从右向左滚动，侧边栏将保持不变。简而言之，其中两个将随时可见。他们都没有因为被滚动而被隐藏起来

请查看我的图片

进一步解释。

查看链接：fiddle

我打算仅使用 css 来完成此操作。

.scrolltable {
  overflow-x: scroll;
  height: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}
.scrolltable > .header {} 
.scrolltable > .body {
  /*noinspection CssInvalidPropertyValue*/

  width: -webkit-fit-content;
  overflow-y: scroll;
  flex: 1;
  -webkit-flex: 1;
}
th,
td {
  min-width: 150px;
}

#constrainer {
  width: 400px;
  height: 400px;
  width: 89%;
  height: 400px;
  margin-left: 149px;
  height: 85vh;
}

.scrolltable .header{background:none;}

.left-sticky{
  position: absolute !important;
  left: 17px;
  width: 138px !important;
  max-width: 138px !important;
}

table tr td{text-align:center}

<div class="table-section-area table-section-area-bottom" id="main-bottom-table">
  <div class="">
    <div id="constrainer">
      <div class="scrolltable">
        <table class="header table-striped unique-table ">
          <thead>
            <tr>
              <th overdata="true" colspan="1"  class="left-sticky">
                <div>(S)</div>
              </th>
              <th>
                first
              </th>
              <th>
                second
              </th>
              <th>
                first
              </th>
              <th>
                second
              </th>
              <th>
                first
              </th>
              <th>
                second
              </th>
              <th>
                first
              </th>
              <th>
                second
              </th>
            </tr>
          </thead>
        </table>
        <div class="body">
          <div>
            <table>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
              <tr>
                <td class="left-sticky">leftbar</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
                <td>3434</td>
                <td>1434</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

当说“除非用户滚动表格，否则让左侧边栏保持在左侧”时，您实际上是指“何时”或“同时”而不是“除非”？你这样写的句子意味着当用户滚动时侧边栏不应该粘住，我觉得这与你想要的相反......
您好，请查看我附上的图片链接。我的意思是左侧边栏相对于自上而下滚动移动，顶部标题随左右滚动移动。
你可能想更新这个问题，因为这不是很清楚......
我做到了，感谢您的意见。

标签： css html html-table

【解决方案1】：

显然，除了使用 javascript 之外，没有其他解决方法。因为完成这将需要如此多的 div 和表格的嵌套，所以这几乎不值得，而这对我来说完全是一项不可能完成的任务。谢谢，再见。

【讨论】：