How do I position a left scrollbar on a tbody element of a table for Google Chrome?

It can't be changed with CSS. For example, there are browsers (iPhone, ANdroid) that don't have scroll bars. The scroll bar position depends entirely on the user's system, not the web page.

You can use Javascript to imitate what you want. Make a draggable scroll bar replacement, place it on the left, and adjust the hidden overflow according while the user drags the "scrollbar".

Try googling for "jquery scrollbar" or "javascript scrollbar".

Here's a an interesting alternative to scrolling... Dragging (similar to how you drag maps in google maps):http://plugins.jquery.com/project/MapScroller

And yet another alternative, here's a script that calculates the width of the users scroll bar:http://plugins.jquery.com/project/ba-jquery-scrollbarwidth-pluginYou can calculate the width, then hide the scroll bar with overflow:hidden then add a div on the left with same height as the box you want to scroll and same width as the user's scrollbar, then write a script that scrolls the right box to the same position as the one on the left, thus imitating built in system scrollbars.

There's endless possibilities, just use google to find what you need and get creative. ;)

But, I think this is exactly what you're looking for:http://baijs.nl/tinyscrollbar/As you can see in the examples, the scrollbar is made of elements. You can position them on the left if you'd like.

Perhaps that, along with this:http://plugins.jquery.com/project/tbodyscrollis EXACTLY what you need. ;)

Check this out, here's a working example:http://jsfiddle.net/trusktr/xQSxJ/

I'll update it soon to work with a table just for my own exercise. ;)

Often times you will only find partial solutions and will need to improvise to come up with a complete and unique solution. :) Good luck.

As mentioned earlier. This is not a CSS issue, you could however, as trusktr stated, create a cusom javascript scrollbar. Basically you set it up something like this.

<div id="frame"> <div id="scrollbar">  Actual scrollbar </div> <div id="content">  Content here </div></div><style> #frame { height: 400px; overflow: hidden;}</style>

Then you create a draggable object inside the scrollbar which position changes the relative position of the content inside the frame.

For CSS use "direction:rtl;", however results may vary in different browsers.