垂直

Question

我在CSS中有一个问题，我有很多列的大表，我需要冻结一些列，当页面滚动时它不会被移动但我无法弄清楚如何做到这一点。

Answer 1

如果我理解正确，你想要的是不会随页面滚动的列（列是向下的，而不是在右边）。当你滚动水平或垂直时，你想让它们停留吗？

垂直

这对于一个表是不可能的，因为表的一个点可以保持单行（水平）的所有单元格始终处于相同的高度。

您可以尝试将表格拆分为两个（或更多）。为那些您不想滚动到position: absolute等的列设置样式。但是你将面临另一个问题：你必须将所有表的所有行的高度设置为某个固定值;否则，列将无法正确对齐。

如果您需要为垂直滚动保持固定值，请尝试以下操作：您还可以使用jQuery之类的JavaScript框架来注意用户滚动页面然后复制单元格的内容。因此，当细胞实际移动时，第一个可见细胞总是包含相同的值。

水平

如果您需要在水平滚动时固定的第一（少）列（即Excel中的列标题），请使用jQuery迭代第一列中的单元格以获取其大小和位置然后绝对添加将div放在桌子的左边（只需给整个桌子留一些余地，为他们腾出空间）。

检查this blog post。

Answer 2

您只需声明<td>的位置，该位置不会被CSS固定。

示例：

<html>
  <head><style type='text/css'>.noMove { position:fixed; }</style></head>
  <body>
    <table>
      <tr>
          <td>Column 1</td>
          <td class='noMove'>Column 2</td>
      </tr>
    </table>
  </body>
</html>

冷冻大桌子上的列

2 个答案:

垂直

水平