Position Sticky on Thead

Position sticky on thead

Position sticky on thead th works in 2018!

In your stylesheets just add this one line:

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

Your table will need to include thead and th for this to style.

<table>
    <thead>
        <tr>
            <th>column 1</th>
            <th>column 2</th>
            <th>column 3</th>
            <th>column 4</th>            
        </tr>    
    </thead>
    <tbody>
      // your body code
    </tbody>
</table>

Also, if you have multiple rows in thead, you can select the first one to remain sticky:

thead tr:first-child th { position: sticky; top: 0; }

As of March 2018 support is pretty much there across modern browsers
ref: https://caniuse.com/#feat=css-sticky

Credit goes to @ctf0 for this one (ref comment made 3 Dec 2017)

Sticky thead on page scroll and overflow-x not working

Your table header IS sticky. It sticks to the top (at the same y pos) of the table regardless of how small/big the table is. It's the left position that isn't fixed, but you've added scrolling, so you're gonna want to see the table header 2 or 3 as appropriate on scrolling across.

To illustrate the point, I've shortened your outer box to 125px and added overflow-y:scroll, so you can see the effect. Scroll down and you will see the th stay in position while the data rolls up and down.

You may want to narrow the width of the box so that the down arrow is visible without having to scroll across.

Hope this clarifies things a bit for you

* {
  margin: 0;
  box-sizing: border-box;
}

.outer_box5 {
  margin: 0 auto;
  width: 1200px;
  height:125px;
  overflow-x:scroll;
  overflow-y:scroll;
  background: #5ffc6c;
}

.table-fixed {
  position: relative;
  border-collapse: collapse;
  width: 2400px;
}

.table-fixed thead th {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 999;
  background-color: #000;
  color: #fff;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /*-- inline css in css section--*/
  </style>
</head>

<body>
  <div style="width: 100%; height: 500px; background: #ffd18d;"></div>
  <div class="outer_box5">
    <table class="table-fixed">
      <thead>
        <tr>
          <th>Table Header 1</th>
          <th>Table Header 2</th>
          <th>Table Header 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div style="width: 100%; height: 500px; background: #ffd18d;"></div>
</body>

</html>

The HTML table sticky columns and rows stop working when I add css to keep the table within the page boundaries

You can set/make the thead itself sticky instead of individual rows/trs. As for the names in the row, since they're first-child of each tbody's trs you can select them and apply styles, like so:

tbody>tr>td:first-child{
  background: red;
  position: sticky;
  left: 0;
}

You can then wrap the table inside a block container to give it vertical and horizontal scrolling. See the CSS example below:

.table-wrapper{
  margin: 0 auto;
  display: block;
  width: 98vw;
  height: 95vh;
  overflow: auto;
  border: 1px solid black;
}

I've edited your jsfiddle here.

Sticky first column on table

Have you checked the structure of your HTML? The selectors you are applying in your CSS do not match the elements on the page.

On line 58 you are targeting table thead th:first-child but you do not have a <thead> or a <th> in your html.

table thead th:first-child {
   position: sticky;
   left: 0;
   z-index: 2;
}

Should be:

table tr td:first-child {
   position: sticky;
   left: 0;
   z-index: 2;
}

Sticky multiple table header (thead) rows using only css/bootstrap

If both the top values are same then, it is going to overlap one on each other, change the second header's top value with first header's height. Shown below

thead tr:nth-child(1) th { position: sticky; top: 0; }
thead tr:nth-child(2) th { position: sticky; top: 43px; }

Here top: 43px is a height of first header's

Full Example

//HTML

<table id="customers">
<thead>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <th>Company 2</th>
    <th>Contact 2</th>
    <th>Country 2</th>
  </tr>
  </thead>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>Simon Crowther</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris spécialités</td>
    <td>Marie Bertrand</td>
    <td>France</td>
  </tr>
  <tr>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
  </tr>
  <tr>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
  </tr>
  <tr>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
  </tr>
  <tr>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
    <td>Some repeated content</td>
  </tr>

</table>

//CSS

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
thead tr:nth-child(1) th { position: sticky; top: 0; }
thead tr:nth-child(2) th { position: sticky; top: 43px; }

Example link to jsfiddle

Position Sticky on Thead