html - 使用 CSS 锁定列

Question

编辑:我尝试了主题中推荐的解决方案，这篇文章可能是重复的。将解决方案从 jsfiddle.net/DJqPf/7/复制并粘贴到 john.nichel.net/test2.html(我没有足够的代表发布两个链接，所以我不能给你 http)并且它没有'根本不滚动。

我希望使用 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

这里有一个简单的解决方案。您可以制作两张 table 而不是一张。第一个表的列上有那些锁定的单元格，第二个表固定在第一个表上，它包含所有那些可滚动的行。您唯一应该做的就是放置这两个表，使它们看起来像一个元素。在这里由于某些原因我不完全理解你必须将你的两个表打包到另一个 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 中，因此只有一个滚动条。