0

I try to fix the header of a scrollable table which has a custom column width.

When I turn the tbody to block tag, then header columns and body columns do not match each other.

You can see the example from this pen

https://codepen.io/engtuncay/pen/Oqayod

Html Part has a div, in this div, there is a table, I defined column size in the col tags.

    .tableDiv{
      height:150px;
      overflow-y:scroll;
      padding:10px;
    }
    
    .fixed_header{
       width: 100%;
       table-layout: fixed;
    }
    <div class="tableDiv">
    <table class="fixed_header">
      <thead>
        <colgroup>
          <col style="width:70px">
          <col style="width:150px">
          <col>
          <col>
          <col>
        </colgroup>
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
          <th>Col 4</th>
          <th>Col 5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>row 1-0</td>
          <td>row 1-1</td>
          <td>row 1-2</td>
          <td>row 1-3</td>
          <td>row 1-4</td>
        </tr>
        <tr>
          <td>row 2-0</td>
          <td>row 2-1</td>
          <td>row 2-2</td>
          <td>row 2-3</td>
          <td>row 2-4</td>
        </tr>
        <tr>
          <td>row 3-0</td>
          <td>row 3-1</td>
          <td>row 3-2</td>
          <td>row 3-3</td>
          <td>row 3-4</td>
        </tr>
        <tr>
          <td>row 4-0</td>
          <td>row 4-1</td>
          <td>row 4-2</td>
          <td>row 4-3</td>
          <td>row 4-4</td>
        </tr>
        <tr>
          <td>row 5-0</td>
          <td>row 5-1</td>
          <td>row 5-2</td>
          <td>row 5-3</td>
          <td>row 5-4</td>
        </tr>
        <tr>
          <td>row 6-0</td>
          <td>row 6-1</td>
          <td>row 6-2</td>
          <td>row 6-3</td>
          <td>row 6-4</td>
        </tr>
        <tr>
          <td>row 7-0</td>
          <td>row 7-1</td>
          <td>row 7-2</td>
          <td>row 7-3</td>
          <td>row 7-4</td>
        </tr>
     
      </tbody>
      </table>
    </div>

Thanks

Ali
  • 1,326
  • 1
  • 17
  • 38
engtuncay
  • 867
  • 10
  • 29
  • 1
    https://stackoverflow.com/questions/47723996/table-with-fixed-thead-and-scrollable-tbody Here it explains and have working version – Zahid Rahman Mar 22 '19 at 11:16
  • 1
    This question is already been answered one of old question. [enter link description here](https://stackoverflow.com/questions/47723996/table-with-fixed-thead-and-scrollable-tbody) – Zahid Rahman Mar 22 '19 at 11:22
  • my question is different in respect to custom column width , for my example, the first two columns have custom width , i defined their widths in the col tags. – engtuncay Mar 22 '19 at 11:31
  • I defined column width for a solution you sent in the stackoverflow post, but it does not work. You can see that from https://codepen.io/engtuncay/pen/NJeRXq – engtuncay Mar 22 '19 at 11:45

1 Answers1

1

You can set position of the header as fixed.I am writing a sample layout.

<div style="display:flex;justify-content:space-between;">
 <div style="display:inline-block;"><!-- this will contain single column-->
<div style="position:fixed;top:0px;left:0px;">
Col1
</div>
Gagan
  • 367
  • 1
  • 4
  • 18
  • @engtuncay the problem with your code is your layout. You should first group every column as single entity and then you can display all those columns in a flexbox ith justify content as space-between and after that you can fix header – Gagan Mar 23 '19 at 05:24
  • thanks for your answer. do you mean generating table with div tags using flex instead of table tag ? – engtuncay Mar 25 '19 at 06:48
  • @engtuncay i mean basically you are making separate element for first row which you want as fixed but do it like layout table columnwise. – Gagan Mar 25 '19 at 14:47