Scrolling a table with fixed headers at the top

Question

I'm trying to make a table where the thead doesn't scroll but the tbody does. I'm using percentages and fixed width to decide how big every cell is, I want my percentage td's to all have the same size and align with the thead headers.

I also have a JSFiddle to show the problem.

.main-wrapper {
  overflow-y: scroll;
  height: 300px;
  border: 1px solid blue;
}

.content-wrapper {
  height: 500px;
}

.table {
  width: 100%;
  table-layout: fixed;
}

.table.content {
  margin-bottom: 15px;
}

.header {
  position: fixed;
}

.cell {
  border: 1px solid red;
  width: 100%;
  height: 15px;
}

.medium {
  width: 100px;
}

.small {
  width: 50px;
}

<div class="main-wrapper">
  <div class="content-wrapper">
    <table class="table header">
      <thead>
        <tr>
          <th class="cell medium">A</th>
          <th class="cell small">B</th>
          <th class="cell">C</th>
          <th class="cell">D</th>
          <th class="cell">E</th>
          <th class="cell">F</th>
          <th class="cell">G</th>
          <th class="cell">H</th>
          <th class="cell">I</th>
          <th class="cell small">J</th>
        </tr>
      </thead>
    </table>
    <table class="table content">
      <tbody>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

If I remove position: fixed it works as I want but the thread doesn't stay at the top.

But you tried [this](https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody) and [this](https://stackoverflow.com/questions/38198373/make-html-table-thead-fixed-while-scrol-in-dynamic-tbody-in-php) and [this](https://stackoverflow.com/questions/8321849/how-to-scroll-tables-tbody-independent-of-thead) and [this](https://stackoverflow.com/questions/130564/how-can-i-let-a-tables-body-scroll-but-keep-its-head-fixed-in-place) and [this](https://www.tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/) — caramba, Sep 19 '17 at 07:54

score 0 · Answer 1 · answered Sep 19 '17 at 07:58

I think it's not possible just by CSS.

I tried it too time ago and searched for a solution with no luck.

The only way to aproach it (I think) is by javascript and not with tables but Divs.

Fortunately there are plugins that does it for us, like fixedheadertable

score 0 · Answer 2 · answered Sep 19 '17 at 10:33

If you don't use a <thead> tag inside your table you could maybe use the position:sticky property to keep your cells width while not taking the header cells out of the html flow (fixed position).

as this:

.main-wrapper {
  overflow-y: scroll;
  height: 300px;
  border: 1px solid blue;
}

.content-wrapper {
  height: 500px;
}

.table {
  width: 100%;
  table-layout: fixed;
}

.table.content {
  margin-bottom: 15px;
}

th{
  position: sticky;
  top:0px;
}

.cell {
  border: 1px solid red;
  width: 100%;
  height: 15px;
}

.medium {
  width: 100px;
}

.small { 
  width: 50px;
}

<div class="main-wrapper">
  <div class="content-wrapper">
    <table class="table header">       
      <tbody>
        <tr>
          <th class="cell medium">A</th>
          <th class="cell small">B</th>
          <th class="cell">C</th>
          <th class="cell">D</th>
          <th class="cell">E</th>
          <th class="cell">F</th>
          <th class="cell">G</th>
          <th class="cell">H</th>
          <th class="cell">I</th>
          <th class="cell small">J</th>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
        <tr>
          <td class="cell medium">A</td>
          <td class="cell small">B</td>
          <td class="cell">C</td>
          <td class="cell">D</td>
          <td class="cell">E</td>
          <td class="cell">F</td>
          <td class="cell">G</td>
          <td class="cell">H</td>
          <td class="cell">I</td>
          <td class="cell small">J</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Scrolling a table with fixed headers at the top

2 Answers2