table 个单元格中的滚动条

Question

我想要一个占据整个屏幕的 table，它有侧边栏、底部栏和主面板。每个都应该能够独立滚动，并且在任何情况下整个页面都不应有滚动条。

这是我的：

<div style="width: 100%; height: 100%; display:block;">
  <table style="position: absolute; width: 100%; height: 100%; border-collapse: separate; border-spacing: 1px;">
    <tbody style="height:100%">
      <tr>
        <td id="sidebar" style="width: 200px; height: 100%; vertical-align: top;" rowspan="2">
          <div style="width: 200px;height: 100%;margin: 0;padding: 0;overflow-y: scroll;overflow-x:auto;">
            Side
          </div>
        </td>
        <td id="stepeditor" style="vertical-align: top; position: relative; display: block; width: 100%; height: 100%;">
          <div style="position: relative; width: 100%; height: 100%; margin: 0; padding: 0; overflow: scroll;">
            main
          </div>
        </td>
      </tr>
      <tr>
        <td style="vertical-align: top; height: 200px; border-top: 1px solid;">
          <div style="width: 100%; height: 200px; margin: 0; padding: 0; overflow: scroll;">
            bottom
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

我一直在摆弄很多选项，目前只有侧边栏能按我的意愿工作，但完整的上仍然有滚动条window，我不知道它们为什么在那里.

如何让它正常工作？

Answer 1

解决方案：https://jsfiddle.net/mj0baug5/

每个面板使用 overflow-x:hidden; overflow-y:scroll; 而不是 overflow:auto。这将启用垂直滚动但不启用水平滚动。

要限制页面滚动，请使用：

body {
  overflow: hidden;
}

Answer 2

你的风格问题。

正文需要设置margin:0;
对于 tbody 不需要设置 height = 100%
table 中的边框也是一个问题，最好移动到 div（如果需要边框）

<style>
     html, body {padding: 0; margin:0;  width: 100%; height: 100%;}
</style>

<div style="width: 100%; height: 100%; display:block;">
  <table style="position: absolute; width: 100%; height: 100%; ">
    <tbody >
      <tr>
        <td id="sidebar" style="width: 200px; height: 100%; vertical-align: top;" rowspan="2">
          <div style="width: 200px;height: 100%;margin: 0;padding: 0;overflow-y: scroll;overflow-x:auto;">
            Side
          </div>
        </td>
        <td id="stepeditor" style="vertical-align: top; position: relative; display: block; width: 100%; height: 100%;">
          <div style="position: relative; width: 100%; height: 100%; margin: 0; padding: 0; overflow: scroll;">
            main
          </div>
        </td>
      </tr>
      <tr>
        <td style="vertical-align: top; height: 200px; border-top: 1px solid;">
          <div style="width: 100%; height: 200px; margin: 0; padding: 0; overflow: scroll;">
            bottom
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

table 个单元格中的滚动条

Scroll bars in table cells

html

html-table

scrollbar