表TD固定的，垂直和水平滾動

我有一個TD的表固定時，該表具有垂直和水平滾動：表TD固定的，垂直和水平滾動

.div1{ 
 
    width: 100%; 
 
    max-width:100%; 
 
} 
 

 
.div2{ 
 
    max-width: 200px; 
 
    overflow-x:auto; 
 
} 
 

 
.tableStyle{ 
 
    width: auto; 
 
    max-width: 0px; 
 
    overflow-x:auto; 
 
} 
 

 
.tbodyClass{ 
 
\t max-height: 80px; 
 
    overflow-y: auto; 
 
/* position:absolute;*/ 
 
} 
 

 
.move{ 
 
    width:70px; 
 
    min-width: 70px; 
 
} 
 

 
.fixed{ 
 

 
    width:100px; 
 
    position:absolute; 
 
    border-bottom:0px; 
 
}

<div class="div1"> 
 
\t <div class="div2"> 
 
    <table class="tableStyle"> 
 
     <thead> 
 
      <th class="move"> C1 </th> 
 
      <th class="move"> C2 </th> 
 
      <th class="move"> C3 </th> \t \t \t \t 
 
      <th class="fixed">C4</th> 
 
     </thead> 
 
     <tbody class="tbodyClass"> 
 
      <tr> 
 
      <td class="move">1 column1 </td> 
 
      <td class="move">1 column2 </td> 
 
      <td class="move">1 column3 </td> 
 
      <td class="fixed">1 columnFix </td> 
 
      </tr> 
 
      <tr> 
 
      <td class="move">2 column1 </td> 
 
      <td class="move">2 column2 </td> 
 
      <td class="move">2 column3 </td> 
 
      <td class="fixed">2 columnFix </td> 
 
      </tr> 
 
      <tr> 
 
      <td class="move">3 column1 </td> 
 
      <td class="move">3 column2 </td> 
 
      <td class="move">3 column3 </td> 
 
      <td class="fixed">3 columnFix </td> 
 
      </tr> 
 
      <tr> 
 
      <td class="move">4 column1 </td> 
 
      <td class="move">4 column2 </td> 
 
      <td class="move">4 column3 </td> 
 
      <td class="fixed">4 columnFix </td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div> 
 
</div>

利用該代碼，水平滾動作品很好，當我嘗試添加垂直滾動（取消註釋/ *位置：絕對; * /）時，它會丟失固定列。

我該如何解決？

來源

2017-03-15 cucuru

入住這http://stackoverflow.com/questions/3402295/html-table-with-horizontal-scrolling-first-column-fixed –

你不」沒有足夠的內容需要垂直滾動，除非你減少你的'tbody'的高度。另外，你爲什麼認爲設置position：absolute會創建一個垂直滾動？這就像你看到的那樣打破了你的固定專欄。 – Slime

我在.tbodyClass中試過了height：8px，我沒有看到垂直滾動。我如何修復列，如果它不與位置：消除？ – cucuru

檢查此，上午添加樣式max-height:120px;到div2。請嘗試下面的代碼

.div1{ 
 
    width: 100%; 
 
    max-width:100%; 
 
} 
 

 
.div2{ 
 
    max-width: 200px; 
 
    overflow-x:auto; 
 
    max-height : 120px; 
 

 
} 
 

 
.tableStyle{ 
 
    width: auto; 
 
    max-width: 0px; 
 
    overflow-x:auto; 
 
} 
 

 
.tbodyClass{ 
 
\t max-height: 80px; 
 
    overflow-y: auto; 
 
/* position:absolute;*/ 
 
} 
 

 
.move{ 
 
    width:70px; 
 
    min-width: 70px; 
 
} 
 

 
.fixed{ 
 

 
    width:100px; 
 
    position:absolute; 
 
    border-bottom:0px; 
 
}

<div class="div1"> 
 
\t <div class="div2"> 
 
    <table class="tableStyle"> 
 
     <thead> 
 
      <th class="move"> C1 </th> 
 
      <th class="move"> C2 </th> 
 
      <th class="move"> C3 </th> \t \t \t \t 
 
      <th class="fixed">C4</th> 
 
     </thead> 
 
     <tbody class="tbodyClass"> 
 
      <tr> 
 
      <td class="move">1 column1 </td> 
 
      <td class="move">1 column2 </td> 
 
      <td class="move">1 column3 </td> 
 
      <td class="fixed">1 columnFix </td> 
 
      </tr> 
 
      <tr> 
 
      <td class="move">2 column1 </td> 
 
      <td class="move">2 column2 </td> 
 
      <td class="move">2 column3 </td> 
 
      <td class="fixed">2 columnFix </td> 
 
      </tr> 
 
      <tr> 
 
      <td class="move">3 column1 </td> 
 
      <td class="move">3 column2 </td> 
 
      <td class="move">3 column3 </td> 
 
      <td class="fixed">3 columnFix </td> 
 
      </tr> 
 
      <tr> 
 
      <td class="move">4 column1 </td> 
 
      <td class="move">4 column2 </td> 
 
      <td class="move">4 column3 </td> 
 
      <td class="fixed">4 columnFix </td> 
 
      </tr> 
 
      <tr> 
 
      <td class="move">5 column1 </td> 
 
      <td class="move">5 column2 </td> 
 
      <td class="move">5 column3 </td> 
 
      <td class="fixed">5 columnFix </td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</div> 
 
</div>

來源

2017-03-15 13:31:55 vijay

謝謝，這不是與表格的其餘部分垂直移動C4 – cucuru

表TD固定的，垂直和水平滾動

回答

相關問題