使用CSS鎖定列

編輯：我試過在本主題中推薦的解決方案，此帖可能是重複的。從jsfiddle.net/DJqPf/7/複製並粘貼解決方案到john.nichel.net/test2.html（我沒有足夠的代表發佈兩個鏈接，所以我不能給你的http），它不'完全不滾動。使用CSS鎖定列

我正在尋找使用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>

來源

2017-08-14 omgwtfbbq

什麼是「鎖一列」的位置呢？像Excel電子表格一樣凍結其他列滾動但凍結列不行？ –

是的，這就是我想要做的。 – omgwtfbbq

[在水平滾動中修復列]可能的副本（https://stackoverflow.com/questions/18826775/fix-columns-in-horizontal-scrolling） – dbrree

下面是一個簡單的sollution。你可以製作兩個表格而不是一個表格。第一個表的列上有鎖定的單元格，第二個表格固定在第一個表格上，它包含所有可滾動的行。你應該做的唯一事情就是定位這兩張桌子，讓它看起來像一個元素。在這裏出於某些原因，我不完全明白你必須將你的表格打包到另一個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元素，因此只有一個滾動條。

來源

2017-08-14 19:45:05

感謝Robert。我嘗試了這一點，它適用於單行，但是當我添加多行時，它不凍結第一列，如果我像第一行那樣包裝這些新行，我會爲每一行獲取滾動條（第一細胞被凍結）。 – omgwtfbbq

是的你是對的，抱歉，我沒有想過它，但我認爲我得到了一個不同的溶劑，應該是更大的可擴展性。 –

我編輯了我的答案，現在它應該適用於多行。 –

-1

好心請檢查此鏈接有固定值

[1]: https://jsfiddle.net/ypupz9bh

https://jsfiddle.net/ypupz9bh

來源

2017-08-14 19:49:27

請確保您的代碼的重要部分包含在答案中，而不是僅僅鏈接到它。 –

使用CSS鎖定列

回答

相關問題