2

How would I go about scrolling HTML table horizontally to a specified column using JS, I have overflow: scroll; on my table and I want to know if I could do something like:

myTable.scrollToColumn(column_ID_or_something_here);
Improve this question
2

2 Answers 2

Reset to default
1

You can use scrollIntoView

document.getElementById("column_ID_or_something_here").scrollIntoView(true);

If scrollIntoView somehow breaks DOM, use focus() method. Key point here if element don't have tabindex first you need add it.
In your case table column probably don't have tabindex, code will be:

element.setAttribute('tabindex', '999'); 
element.focus();

If you need this for Selenium here code (Java):

((JavascriptExecutor) driver).executeScript("arguments[0].setAttribute('tabindex', '999'); arguments[0].focus();", seleniumElement);
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Already tried, it literally scrolls to the column and doesn't affect rows at all, so table looks deformed.
will try it first thing tomorrow morning
Table still looks deformed.
Do you have child element like button, input.. or in columns nearly?
0

first of all, take any one element from that column using document.getElementsByClassName("class_name")[n]. Applying getBoundingClientRect() method will give you that elements' left and right properties with respect to their position on screen as follows,

document.getElementsByClassName("class_name")[n].getBoundingClientRect().left
document.getElementsByClassName("class_name")[n].getBoundingClientRect().right

if left is negative then you'll have to scroll on right or else you'll have to scroll on left.

table_Element.scrollBy (x, y) will help you to scroll the table. Put y as 0 as you dont want to scroll vertically and put x as -1 * (value of left).

Improve this answer

2 Comments

create a fiddle of your code so i can check with your fiddle.
vadiya yes i fixed it using dgrids internal method as suggested on my other question

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.