html table with scrollable body: how to make scrolled to the end by default?

Question

My table is similar to the one suggested by Eamon Nerbonne in how do I create an HTML table with fixed/frozen left column and scrollable body?. Its code can be found below.

By default, the table appear as 'scrolled: 0% 0%', i.e. scrolled to the top left (one can see the cell "AAAA" of row 1).

Question: How to make this table 'scrolled: 0% 100%' by default, i.e. that one can see the top right cell when the page is loaded (here cell "ZZZZ" of row 1) as shown in the picture below?

    body {
  font:16px Calibri;
}
div { 
  width: 600px; 
  overflow-x:scroll;  
  margin-left:5em; 
  overflow-y:visible;
  padding-bottom:1px;
}

table { 
  border-collapse:separate; 
  border-top: 
  3px solid grey;
}

td, th {
  margin:0;
  border:3px solid grey; 
  border-top-width:0px; 
  white-space:nowrap;
}



.headcol {
  position:absolute; 
  width:5em; 
  left:0;
  top:auto;
  border-right: 0px none black; 
  border-top-width:3px; /*only relevant for first row*/
  margin-top:-3px; /*compensate for top border*/
}

.headcol:before {content: 'Row ';}
.long { background:yellow; letter-spacing:1em; }

    <div>
  <table>
   <tr>
      <th class="headcol">1</th>
      <td class="long">AAAAA</td>
      <td class="long">BBBBB</td>
      <td class="long">CCCCC</td>
      <td class="long">DDDDD</td>
      <td class="long">EEEEE</td>
      <td class="long">FFFFF</td>
      <td class="long">GGGGG</td>
      <td class="long">HHHHH</td>
      <td class="long">.....</td>
      <td class="long">XXXXX</td>
      <td class="long">YYYYY</td>
      <td class="long">ZZZZZ</td>
    </tr>
    <tr>
      <th class="headcol">2</th>
      <td class="long">AAAAA</td>
      <td class="long">BBBBB</td>
      <td class="long">CCCCC</td>
      <td class="long">DDDDD</td>
      <td class="long">EEEEE</td>
      <td class="long">FFFFF</td>
      <td class="long">GGGGG</td>
      <td class="long">HHHHH</td>
      <td class="long">.....</td>
      <td class="long">XXXXX</td>
      <td class="long">YYYYY</td>
      <td class="long">ZZZZZ</td>
    </tr>
    <tr>
      <th class="headcol">3</th>
      <td class="long">AAAAA</td>
      <td class="long">BBBBB</td>
      <td class="long">CCCCC</td>
      <td class="long">DDDDD</td>
      <td class="long">EEEEE</td>
      <td class="long">FFFFF</td>
      <td class="long">GGGGG</td>
      <td class="long">HHHHH</td>
      <td class="long">.....</td>
      <td class="long">XXXXX</td>
      <td class="long">YYYYY</td>
      <td class="long">ZZZZZ</td>
    </tr>
    <tr>
      <th class="headcol">4</th>
      <td class="long">AAAAA</td>
      <td class="long">BBBBB</td>
      <td class="long">CCCCC</td>
      <td class="long">DDDDD</td>
      <td class="long">EEEEE</td>
      <td class="long">FFFFF</td>
      <td class="long">GGGGG</td>
      <td class="long">HHHHH</td>
      <td class="long">.....</td>
      <td class="long">XXXXX</td>
      <td class="long">YYYYY</td>
      <td class="long">ZZZZZ</td>
    </tr>
  </table>
</div>

Fiddle

sparta93 · Accepted Answer · 2017-03-17T15:48:59.950

4

You can achieve it like this. direction:rtl and direction:ltr are key here.

JSFiddle - http://jsfiddle.net/wpsnkpLk/ (Thanks to ebo)

div {
    width: 320px;
    height: 2em;
    overflow: scroll;
    direction:rtl;
}

table{
    direction:ltr;
}

edit: Based on ebo's comments (thanks!), you need to apply the style to the container containing the table (div above) first and then to the table itself for the desired result.

edited Mar 17 '17 at 15:48

answered Mar 15 '17 at 20:12

sparta93

3,684
5
32
63

Very clever. Can't say I've actually had a usage for `rtl` before. – Leland Mar 15 '17 at 20:19
Caution: the key is actually to use `div{direction:rtl;}` (`div` refering here to the table container) in order to read the table right to left (i.e. initial position of the scroll bar) *and* to use `table{direction:ltr;}` in order to display the columns left to right. Without the latter, columns are printed right to left too, as inherited property: i.e. `[c1 frozen][c4][c3][c2]`. The example was tricky since `c2` and `c3` were the same. Linked JSFiddle is correct, yet here is [another made more explicit](http://jsfiddle.net/wpsnkpLk/) – ebosi Mar 15 '17 at 21:41
@ebo sorry, was a little busy. I have updated the answer based on your comment. Thanks again! – sparta93 Mar 17 '17 at 15:50

html table with scrollable body: how to make scrolled to the end by default?

1 Answers1