html - 带有 td 固定、垂直和水平滚动的表格

Question

我有一个固定有一个 td 的表格，表格有垂直和水平滚动:

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

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

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

.tbodyClass{
	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">
	<div class="div2">
    <table class="tableStyle">
        <thead>
            <th class="move"> C1 </th>
            <th class="move"> C2 </th>
            <th class="move"> C3 </th>				
            <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>

使用这段代码，水平滚动效果很好，当我尝试添加垂直滚动(取消注释/* position:absolute;*/)时，它丢失了固定列。

我该如何解决？

Answer 1

检查这个，我正在将样式 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{
	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">
	<div class="div2">
    <table class="tableStyle">
        <thead>
            <th class="move"> C1 </th>
            <th class="move"> C2 </th>
            <th class="move"> C3 </th>				
            <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>