在左列固定的情况下水平和垂直滚动 HTML 表格答案

【问题标题】：Scroll HTML table horizontal and vertical while left column is fixed在左列固定的情况下水平和垂直滚动 HTML 表格
【发布时间】：2014-01-19 02:46:22
【问题描述】：

我正在尝试创建一个HTML 表格，其中其高度有限，左侧在水平滚动时保持固定（并且表格主体可水平滚动）但在垂直滚动时不固定（左侧将与表格的其余部分一起滚动）。

fixed    scrollable
  1     body content
  2     body content
  3     body content
  4     body content
  .          .
  .          .
  .          .

我找到了this solution，但是它只处理水平滚动。在 Eamon Nerbonne jsFiddle 示例中，将 height: 150px; 添加到 div 将演示我正在尝试解决的错误。

我想找到一个只涉及 HTML 和 CSS 的解决方案。

【问题讨论】：

为什么要在第一列固定时让表格垂直滚动？你不会这样打破行吗？
@myajouri 考虑在堆栈溢出的代码框（表）中添加一个带有行号（1,2,3..）的固定 td。我希望在正文的其余部分可滚动时固定行号。
但是行号会随着框的其余部分垂直滚动，不是吗？否则行会有错误的数字。
你也想要一个固定第一列的垂直滚动吗？
@LearningByCoding 我希望左侧 td 在水平滚动时固定但在垂直滚动时不固定（假设表格高度是有限/固定的）。

标签： html css scroll html-table

【解决方案1】：

将另一个 div 添加到 Eamon Nerbonne 的 solution，给了我以下解决方案：

jsFiddle

基本上解决方案是，如果您添加另一个控制辅助 div 流的父 div 可能会给您一个机会。

<div class="first">
    <div class="second">
        <table>
            <tr><td class="headcol">1</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">2</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">3</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">4</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">5</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">6</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">7</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">8</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">9</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        </table>
    </div>
</div>

我为外部 div 添加了如下样式：

div.first {
    width: auto;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 150px;     /* this is the height that you expect to contain */      
    padding-bottom: 1px;
    position: absolute;
    left:0;
    top:auto;
}

【讨论】：

我想在每个单独的 tr 之后添加滚动条，而不是为整个表格添加滚动条......我应该进行哪些更改？
@NikitaDhiman 您希望每一行都有滚动且第一列是固定的吗？为什么不在每个 tr>td 中使用一个 div

【解决方案2】：

有点晚了，但我在为自己尝试解决方案时确实遇到了这个线程。假设你现在使用的是现代浏览器，我想出了一个使用 CSS calc() 来帮助保证满足宽度的解决方案。

.table-fixed-left table,
.table-fixed-right table {
  border-collapse: collapse;
}
.table-fixed-right td,
.table-fixed-right th,
.table-fixed-left td,
.table-fixed-left th {
  border: 1px solid #ddd;
  padding: 5px 5px;
}
.table-fixed-left {
  width: 120px;
  float: left;
  position: fixed;
  overflow-x: scroll;
  white-space: nowrap;
  text-align: left;
  border: 1px solid #ddd;
  z-index: 2;
}
.table-fixed-right {
  width: calc(100% - 145px);
  right: 15px;
  position: fixed;
  overflow-x: scroll;
  border: 1px solid #ddd;
  white-space: nowrap;
}
.table-fixed-right td,
.table-fixed-right th {
  padding: 5px 10px;
}

<div class="table-fixed-left">
  <table>
    <tr>
      <th>Normal Header</th>
    </tr>
    <tr>
      <th>Header with extra line
        <br/>&nbsp;</th>
    </tr>
    <tr>
      <th>Normal Header</th>
    </tr>
    <tr>
      <th>Normal with extra line
        <br/>&nbsp;</th>
    </tr>
    <tr>
      <th>Normal Header</th>
    </tr>
    <tr>
      <th>Normal Header</th>
    </tr>
  </table>
</div>
<div class="table-fixed-right">
  <table>
    <tr>
      <th>Header</th>
      <th>Another header</th>
      <th>Header</th>
      <th>Header really really really really long</th>
    </tr>
    <tr>
      <td>Info Long</td>
      <td>Info
        <br/>with second line</td>
      <td>Info
        <br/>with second line</td>
      <td>Info Long</td>
    </tr>
    <tr>
      <td>Info Long</td>
      <td>Info Long</td>
      <td>Info Long</td>
      <td>Info Long</td>
    </tr>
    <tr>
      <td>Info
        <br/>with second line</td>
      <td>Info
        <br/>with second line</td>
      <td>Info
        <br/>with second line</td>
      <td>Info</td>
    </tr>
    <tr>
      <td>Info</td>
      <td>Info</td>
      <td>Info</td>
      <td>Info</td>
    </tr>
    <tr>
      <td>Info</td>
      <td>Info</td>
      <td>Info</td>
      <td>Info</td>
    </tr>
  </table>
</div>

希望这对任何人都有帮助！

【讨论】：