Question

编辑：我尝试过该主题中推荐的解决方案，该帖子可能是重复的。将解决方案从jsfiddle.net/DJqPf/7/复制并粘贴到john.nichel.net/test2.html（我没有足够的代表发布两个链接，所以我不能给你http）并且它没有' t滚动。

我希望使用CSS锁定表或div中的一列或两列数据，这意味着其他列会滚动，但锁定的列不会。

我已经尝试了一些jQuery插件和我发现的许多CSS / div示例但是，无论出于何种原因，我无法使锁定的列之后启动解锁列。我已经尝试过像绝对，固定，相对等等的位置，但似乎无法让这些例子起作用。我怎样才能做到这一点？

以下代码也位于http://john.nichel.net/test.html，因此您可以看到锁定列如何显示在其他列上。我将继续努力，因此我网站上的代码可能与我在下面发布的代码不同。

.table {
  display: table;
}

.header {
  display: table-header-group;
  font-weight: bold;
}

.rowGroup {
  display: table-row-group;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  white-space: nowrap;
}

.cell_locked {
  position: absolute;
  display: table-cell;
  white-space: nowrap;
}

<center>
  <div style="overflow-x:auto;width:770px;overflow:scroll;">
    <div class="table">
      <div class="header">
        <div class="cell_locked">Test Lock</div>
        <div class="cell">Unlocked Cell 1</div>
        <div class="cell">Unlocked Cell 2</div>
        <div class="cell">Unlocked Cell 3</div>
        <div class="cell">Unlocked Cell 4</div>
        <div class="cell">Unlocked Cell 5</div>
        <div class="cell">Unlocked Cell 6</div>
        <div class="cell">Unlocked Cell 7</div>
        <div class="cell">Unlocked Cell 8</div>
        <div class="cell">Unlocked Cell 9</div>
        <div class="cell">Unlocked Cell 10</div>
      </div>
    </div>
</center>

Answer 1

这是一个简单的解决方案。您可以制作两个表而不是一个。第一个表在列上有这些锁定的单元格，第二个表格固定在第一个表格上，它包含所有那些可滚动的行。你应该做的唯一事情就是将这两个表放在一起，使其看起来像一个元素。在这里由于某些原因，我不完全明白你必须将你的表包装到另一个div并给它artibite显示：flex，这是我不完全理解的东西，我的意思是属性的价值。这是代码：

<!--Container for both tables-->
<div class="container">
<!--first table -locked-->
    <div class="table">
        <div class="rowGroup">
            <div class="cell_locked">Test Lock</div>
        </div>
        <div class="rowGroup">
            <div class="cell_locked">Test Lock</div>
        </div>
    </div>

<!--second table -scrollable -->
    <div class="table" style="overflow-x:auto;width:770px;overflow:scroll;">
        <div class="rowGroup">
                <div class="cell">Unlocked Cell 1</div>
                <div class="cell">Unlocked Cell 2</div>
                <div class="cell">Unlocked Cell 3</div>
                <div class="cell">Unlocked Cell 4</div>
                <div class="cell">Unlocked Cell 5</div>
                <div class="cell">Unlocked Cell 6</div>
                <div class="cell">Unlocked Cell 7</div>
                <div class="cell">Unlocked Cell 8</div>
                <div class="cell">Unlocked Cell 9</div>
                <div class="cell">Unlocked Cell 10</div>
        </div>
        <div class="header">
                <div class="cell">Unlocked Cell 1</div>
                <div class="cell">Unlocked Cell 2</div>
                <div class="cell">Unlocked Cell 3</div>
                <div class="cell">Unlocked Cell 4</div>
                <div class="cell">Unlocked Cell 5</div>
                <div class="cell">Unlocked Cell 6</div>
                <div class="cell">Unlocked Cell 7</div>
                <div class="cell">Unlocked Cell 8</div>
                <div class="cell">Unlocked Cell 9</div>
                <div class="cell">Unlocked Cell 10</div>
        </div>
    </div>
</div>

和风格：

.container
{
    display: flex;
}

现在你在一个可滚动的div中拥有所有这些scrolable元素，因此只有一个滚动条。

使用CSS

1 个答案: