Table with sticky header and resizable columns without using JQuery

The only thing you really need is position: sticky; on the header th. This combined with your resize: horizontal will fix your issue if I understand your question right.

table {
  display: block;
  background-color: cyan;
  height: 200px !important;
  overflow-y: scroll;
}

thead th {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

th,
td {
  resize: horizontal;
  overflow: auto;
  min-width: 25px;
}

td {
  font-size: 1.45vmin;
}

tbody {
  height: 30px !important;
  background-color: green;
  width: 100%;
}

<div style="height:30px;background-color:red;">
  <table>
    <thead>
      <tr>
        <th>header1</th>
        <th>header2</th>
        <th>header3</th>
        <th>header4</th>
        <th>header5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>

    </tbody>
  </table>
</div>

For the fixed header I used position: sticky and for the scroll I used a container to mimic the tbody scrolling (actually, it is the tbody that scrolls) and avoid a block display on the table or its tbody that would make it somewhat dysfunctional.

The sticky position has more support than resize anyway so with the mandatory resize property it's relatively safe crossbrowser.

https://caniuse.com/#search=sticky

https://caniuse.com/#search=resize

I tried several times editing this post to make the posted code run here on SO, but to no avail, so I made you a public JsFiddle to play with: https://jsfiddle.net/Erik_J/xzhpdqLo/

(@Sølve Tornøe, I wasn't aware of your post before I submitted. Was away for a few hours and missed to refresh before posting. So you were the first to give a valid solution.)

div {
    position: relative;
    margin: auto;
    outline: 1px solid #000;
    outline-offset: -1px;
    max-width: 900px;
    max-height: 300px;
    overflow-y: scroll;
}
table{ 
    width: 100%;
    border-collapse: collapse;
}
thead th { 
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    resize: horizontal;
    overflow: auto;
    background: #cff;
}
th, td {
    padding: 5px 10px;
    border: 1px solid #000;
}
th {
    text-transform: capitalize;
}

<div>
    <table>
        <thead>
            <tr><th></th><th>header 1</th><th>header 2</th><th>header 3</th><th>header 4</th></tr>
        </thead>
        <tbody>
            <tr><th>header 1</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 2 2222</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 3</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 4</th><td>1</td><td>2</td><td>3 3333333 3333333 3333333</td><td>4</td></tr>
            <tr><th>header 5</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 6</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 7</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 8</th><td>1</td><td>2 2222 2222 2222</td><td>3</td><td>4</td></tr>
            <tr><th>header 9</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 10</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 11</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 12</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 13</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 14</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 15</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
            <tr><th>header 16</th><td>1</td><td>2</td><td>3</td><td>4</td></tr>
        </tbody>
    </table>
</div>

For CSS resizable columns you could use this trick. Abuse the webkit resizable textarea feature. Wrap header titles in readonly textareas and style as headings, just leave the resizing thumb. Use min-max-width to the same to disable vertical resizing. This is just Proof-of-work. Play with it.

<html>  
 <style>
.fixed_headers {

  border-collapse: collapse;
}
.fixed_headers textarea {
  text-decoration: underline;
}
.fixed_headers textarea,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers textarea,
.fixed_headers td {
    min-width: 100px;
}
.fixed_headers thead, textarea {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {

  position: relative;
}
.fixed_headers tbody {

  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}

textarea {
  border: none;
  min-height: 16px;
  max-height: 16px;
}
</style>
    <div style="height: 300px;overflow: auto;">
    <table class="fixed_headers">
    <thead>
    <tr><th><textarea readonly>header 1</textarea></th><th><textarea readonly>header 2</textarea></th><th><textarea readonly>header 3</textarea></th><th><textarea readonly>header 4</textarea></th><th><textarea readonly>header 5</textarea></th></tr>
    </thead>
    <tbody>
    <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
    </tbody>
    </table>
    </div> 
</html>

Demo http://jsfiddle.net/rft8v4sp/1/

Here is a solution using the CSS position: sticky attribute with resize: horizontal.

The resizable table headers will show a small icon in the lower-right hand corner, that you can grab and resize. (Due to a bug in Chrome, it may be so small you can barely see it...so look closely.)

<html>  

    <style>
.fixed_headers {
  border-collapse: collapse;
  width:100%;
}
.fixed_headers td,
.fixed_headers thead th {
  padding: 5px;
  text-align: left;
}
.fixed_headers thead, textarea {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  position: relative;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}

.fixed_headers thead th {
  position: sticky;
  top: 0;  /* REQUIRED: https://stackoverflow.com/a/43707215 */
  background-color: #333; 
  resize: horizontal;
  overflow: auto;
  min-width: 70px;
}
    </style>

        <div style="height: 300px;overflow: auto;">
        <table class="fixed_headers">
        <thead>
        <tr><th>header 1</th><th>header 2</th><th>header 3</th><th>header 4</th><th>header 5</th></tr>
        </thead>
        <tbody>
        <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        <tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>

        </tbody>
        </table>
        </div> 
    </html>

Table with sticky header and resizable columns without using JQuery

Tags:

Javascript

Html

Css

Related

Recent Posts