表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固定的，垂直和水平滚动

回答

相关问题