Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Sticky table layout example</title>
</head>
<body>
<div class="scroller">
  <table>
    <thead>
      <tr>
        <th scope="col">Item</th>
        <th scope="col">Attr 1</th>
        <th scope="col">Attr 2</th>
        <th scope="col">Attr 3</th>
        <th scope="col">Attr 4</th>
        <th scope="col">Attr 5</th>
        <th scope="col">Attr 6</th>
        <th scope="col">Attr 7</th>
        <th scope="col">Attr 8</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Item name 1</th>
        <td>val 1</td>
        <td>val 2</td>
        <td>val 3</td>
        <td>val 4</td>
        <td>val 5</td>
        <td>val 6</td>
        <td>val 7</td>
        <td>val 8</td>
      </tr>
      <tr>
        <th scope="row">Item name 2</th>
        <td>val 1</td>
        <td>val 2</td>
        <td>val 3</td>
        <td>val 4</td>
        <td>val 5</td>
        <td>val 6</td>
        <td>val 7</td>
        <td>val 8</td>
      </tr>
      <tr>
        <th scope="row">Item name 3</th>
        <td>val 1</td>
        <td>val 2</td>
        <td>val 3</td>
        <td>val 4</td>
        <td>val 5</td>
        <td>val 6</td>
        <td>val 7</td>
        <td>val 8</td>
      </tr>
      <tr>
        <th scope="row">Item name 4</th>
        <td>val 1</td>
        <td>val 2</td>
        <td>val 3</td>
        <td>val 4</td>
        <td>val 5</td>
        <td>val 6</td>
        <td>val 7</td>
        <td>val 8</td>
      </tr>
      <tr>
        <th scope="row">Item name 5</th>
        <td>val 1</td>
        <td>val 2</td>
        <td>val 3</td>
        <td>val 4</td>
        <td>val 5</td>
        <td>val 6</td>
        <td>val 7</td>
        <td>val 8</td>
      </tr>
      <tr>
        <th scope="row">Item name 6</th>
        <td>val 1</td>
        <td>val 2</td>
        <td>val 3</td>
        <td>val 4</td>
        <td>val 5</td>
        <td>val 6</td>
        <td>val 7</td>
        <td>val 8</td>
      </tr>
      <tr>
        <th scope="row">Item name 7</th>
        <td>val 1</td>
        <td>val 2</td>
        <td>val 3</td>
        <td>val 4</td>
        <td>val 5</td>
        <td>val 6</td>
        <td>val 7</td>
        <td>val 8</td>
      </tr>
      <tr>
        <th scope="row">Item name 8</th>
        <td>val 1</td>
        <td>val 2</td>
        <td>val 3</td>
        <td>val 4</td>
        <td>val 5</td>
        <td>val 6</td>
        <td>val 7</td>
        <td>val 8</td>
      </tr>
      <tr>
        <th scope="row">Item name 9</th>
        <td>val 1</td>
        <td>val 2</td>
        <td>val 3</td>
        <td>val 4</td>
        <td>val 5</td>
        <td>val 6</td>
        <td>val 7</td>
        <td>val 8</td>
      </tr>
      <tr>
        <th scope="row">Item name 10</th>
        <td>val 1</td>
        <td>val 2</td>
        <td>val 3</td>
        <td>val 4</td>
        <td>val 5</td>
        <td>val 6</td>
        <td>val 7</td>
        <td>val 8</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>
 
function scroll() {
  document.querySelector('.scroller').scrollTo(159,106);
}
​
window.addEventListener('load', scroll);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
flackrpro
0viewers