Scroll programmatically to last column in table

Question

in a table which has horizontal scrolling, how can one best jump to the last column without adding a specific ID/class/ref to the last column itself?

E.g. I can do:

document.getElementsByClassName('makeStyles-tableCell-251')[document.getElementsByClassName('makeStyles-tableCell-251').length -1].scrollIntoView()

but instead I'd like to reference only the table.

Thanks!

Josh Bradley · Accepted Answer · 2020-04-27 17:07:01Z

2

You're nearly there. Try using the :last-child selector.

document.querySelector('#table-you-want tbody tr:last-child').scrollIntoView()

answered Apr 27, 2020 at 17:07

Josh Bradley

1,9741 gold badge18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Faisal Sayed · Accepted Answer · 2020-04-27 17:08:10Z

1

You can use css psuedo selector :last-child for getting the last element.

document.querySelector('table tr td:last-child').scrollIntoView()

table tr td {
  min-width: 100px;
}

<table id="my-table">
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
    <td>column 4</td>
    <td>column 5</td>
    <td>column 6</td>
    <td>column 7</td>
    <td>column 8</td>
  </tr>
</table>

answered Apr 27, 2020 at 17:08

Faisal Sayed

562 bronze badges

Collectives™ on Stack Overflow

Scroll programmatically to last column in table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related