html - Fixing an element on Y axis, but scrolling with page on x axis? -

this question has answer here:

• table header stay fixed @ top when user scrolls out of view jquery 17 answers

is possible fix element 'y' position on page, when scrolling left , right, element scrolls on x-axis well?

in case, have table of data has 20 columns in total (far many display without page scrolling). fix table headers top of page, fixes x-scrolling when scrolling left , right, headers not move. possible fix y-positioning of element?

i've created basic fiddle showing standard table here: http://jsfiddle.net/0n9d92er/. basically, want header 1-20 fixed @ top (for vertical scrolling), when scrolling right, should able see every header 1 20 (when horizontally scrolling).

.header {      width: 2000px;  }  .tg  {      border-collapse:collapse;      border-spacing:0;  }  .tg td {      font-family:arial, sans-serif;      font-size:14px;      padding:10px 5px;      border-style:solid;      border-width:1px;      overflow:hidden;      word-break:normal;  }  .tg th {      font-family:arial, sans-serif;      font-size:14px;      font-weight:normal;      padding:10px 5px;      border-style:solid;      border-width:1px;      overflow:hidden;      word-break:normal;  }  .tg .tg-i7wz {      font-size:20px  }

<table class="tg">    <tr>      <th class="tg-i7wz">header 1</th>      <th class="tg-031e">header 2</th>      <th class="tg-031e">header 3</th>      <th class="tg-031e">header 4</th>      <th class="tg-031e">header 5</th>      <th class="tg-031e">header 6</th>      <th class="tg-031e">header 7</th>      <th class="tg-031e">header 8</th>      <th class="tg-031e">header 9</th>      <th class="tg-031e">header 10</th>      <th class="tg-031e">header 11</th>      <th class="tg-031e">header 12</th>      <th class="tg-031e">header 13</th>      <th class="tg-031e">header 14</th>      <th class="tg-031e">header 15</th>      <th class="tg-031e">header 16</th>      <th class="tg-031e">header 17</th>      <th class="tg-031e">header 18</th>      <th class="tg-031e">header 19</th>      <th class="tg-031e">header 20</th>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent content </td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>  </table>

thanks in advance.

here's quick example not require jquery, , uses javascript float header down page scrolls:

var thead = document.queryselector(".tg tr:first-child");  window.onscroll = function() {      thead.style["-webkit-transform"] = "translatey(" + window.scrolly + "px)";      thead.style.transform = "translatey(" + window.scrolly + "px)";  };

.header {      width: 2000px;  }  .tg  {      border-collapse:collapse;      border-spacing:0;  }  .tg td {      font-family:arial, sans-serif;      font-size:14px;      padding:10px 5px;      border-style:solid;      border-width:1px;      overflow:hidden;      word-break:normal;  }  .tg th {      font-family:arial, sans-serif;      font-size:14px;      font-weight:normal;      padding:10px 5px;      border-style:solid;      border-width:1px;      overflow:hidden;      word-break:normal;  }  .tg .tg-i7wz {      font-size:20px;  }    .tg tr:first-child {      background-color: white;      outline: solid 1px black;  }

<table class="tg">    <tr>      <th class="tg-i7wz">header 1</th>      <th class="tg-031e">header 2</th>      <th class="tg-031e">header 3</th>      <th class="tg-031e">header 4</th>      <th class="tg-031e">header 5</th>      <th class="tg-031e">header 6</th>      <th class="tg-031e">header 7</th>      <th class="tg-031e">header 8</th>      <th class="tg-031e">header 9</th>      <th class="tg-031e">header 10</th>      <th class="tg-031e">header 11</th>      <th class="tg-031e">header 12</th>      <th class="tg-031e">header 13</th>      <th class="tg-031e">header 14</th>      <th class="tg-031e">header 15</th>      <th class="tg-031e">header 16</th>      <th class="tg-031e">header 17</th>      <th class="tg-031e">header 18</th>      <th class="tg-031e">header 19</th>      <th class="tg-031e">header 20</th>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent contentcontent contentcontent content </td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>    <tr>      <td class="tg-031e">content contentcontent contentcontent contentcontent contentcontent content</td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>      <td class="tg-031e"></td>    </tr>  </table>

jsfiddle version: http://jsfiddle.net/0n9d92er/4/