CSS：凍結表格標題和第一列，*但僅限於某些軸*

Question

我對常見問題有變化，我會盡力解釋它。這可能需要您的一些可視化。我有一個HTML表格（實際上表格內的div內有表格 - 我使用JSGantt插件）。我希望只有當我向下滾動y軸時才凍結表頭，但是如果我需要向右滾動以查看更多數據，我希望它向右滾動。

同時，當我向下滾動（標題行保持放置狀態）時，我想讓表格的第一列與我一起向下滾動。但是當我向右滾動時，我希望第一列保持放置（但正如我上面提到的，標題行與我一起滾動）。所以基本上我只在x軸上凍結了第一列，而在y軸上凍結了頭部行。

我現在就停下來。如果有人需要更多的澄清，我可以嘗試解釋。我已經嘗試了這種多種方式，但我相信，如果沒有一些嚴肅的Javascript，它可能是不可能的。順便說一下，表格包含在具有設置尺寸的外部div中，因此需要我滾動數據。

任何幫助，你可以提供將不勝感激。

Answer 1

這種類型的佈局將幫助你的方式。注意：會有很多的細胞的大小，以獲得格式化的他們投其所好

<div id="TableHeaderDiv"> 
    <table id="TableHeader"> 
     <thead> 
      <tr> 
       <th style="width:100px"> Column1 </th> 
       <th style="width:100px"> Column2 </th> 
       <th style="width:100px"> Column3 </th> 
      </tr> 
     <thead> 
    </table> 
</div> 
<div id "TableBodyMainDiv" style="overflow-y:auto"> 
    <div id="TableBodyLeftDiv" style="float:left"> 
    <table id="TableBody"> 
     <tbody> 
      <tr> 
         <td style="width:100px"> Column2Value </td> 
       <td style="width:100px"> Column3Value </td> 
      </tr> 
      <!-- More rows here --> 
     <tbody> 
    </table> 

    </div> 
    <div id="TableBodyDiv" style="float:left; overflow-x: auto"> 
    <table id="TableBody"> 
     <tbody> 
      <tr> 
         <td style="width:100px"> Column2Value </td> 
       <td style="width:100px"> Column3Value </td> 
      </tr> 
      <!-- More rows here --> 
     <tbody> 
    </table> 
    </div> 
</div> 

可能會想使用CSS類或JavaScript