table with td fixed, vertical and horizontal scroll

Question

I have a table with one td fixed, the table has vertical and horizontal scroll:

.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>

With this code, the horizontal scrolls works fine, when I try to add vertical scroll (uncomment /* position:absolute;*/) it lost the fixed column.

How can I fix it?

Check this http://stackoverflow.com/questions/3402295/html-table-with-horizontal-scrolling-first-column-fixed — shubham agrawal, Mar 15 '17 at 12:21
You don't have enough content to necessitate a vertical scroll unless you reduce the height of your `tbody`. Also, why do you think setting `position:absolute` would create a vertical scroll? That's breaking your fixed column like you saw. — Waxi, Mar 15 '17 at 12:32
I tried the height:8px in .tbodyClass and I dont see vertical scroll. How can I fix the column if its not with position:abolute? — cucuru, Mar 15 '17 at 12:52

score 0 · Answer 1 · edited Apr 13 '17 at 05:34

check this, am adding the style max-height:120px; to the div2. please try the below code

.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>

thanks, that's not move vertically C4 with the rest of the table — cucuru, Mar 15 '17 at 14:53

table with td fixed, vertical and horizontal scroll

1 Answers1