How to place scroll bar on side of table?

Question

I have a jsfiddle here: http://jsfiddle.net/m4HB3/

I have a scrolling table with fixed headers which is working correctly. The problem I am having is where the scroll bar is placed, it is placed sligthly underneath the last column which causes it to take up some of the last column space and thus moves the other columns off alignment.

My question is how can I clip the scroll bar to the right of the table so it does not affect taking up column space?

Below is html of sample table:

<table id="tableqanda" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
        <th width="5%" class="questionno">Question No.</th>
        <th width="27%" class="question">Question</th>
        <th width="7%" class="option">Option Type</th>
        <th width="11%" class="image">Image</th>

    </tr>
    </thead>
    </table>
    <div id="tableqanda_onthefly_container">
    <table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
    <tbody>
        <tr class="tableqandarow">
<td width="5%" class="questionno">1</td>
<td width="27%" class="question">What is a RAM?</td>
<td width="7%" class="option">A-E</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
</tr>
<tr class="tableqandarow">
<td width="5%" class="questionno">2</td>
<td width="27%" class="question">Name 3 car maneuvers you may do in a test?</td>
<td width="7%" class="option">A-F</td>
<td width="11%" class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
</tr>
    </tbody>
    </table>
    </div>

Below is css:

#tableqanda_onthefly_container
{
    width:100%;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height:500px;
}

#tableqanda_onthefly
{
    width:100%;
    overflow:scroll;
    clear:both;
}

#tableqanda_onthefly td
{
    border:1px black solid;
    border-collapse:collapse;
}

#tableqanda, #tableqanda_onthefly{
    border:1px black solid;
    border-collapse:collapse;
    table-layout:fixed;
    word-wrap:break-word;
}       

#tableqanda{
    width:100%;
    margin-left:0;
    float:left;
}

#tableqanda td { 
    vertical-align: middle;
    border:1px black solid;
    border-collapse:collapse;
}

#tableqanda th{
    border:1px black solid;
    border-collapse:collapse;
    text-align:center;
}

.tableqandarow{
    border:1px black solid;
    border-collapse:collapse;
}

Add `overflow-y: scroll; overflow-x: hidden;` to `#tableqanda_onthefly` like you have on `#tableqanda_onthefly_container`. — Mooseman, Jan 22 '13 at 23:49
Change both instances of `overflow-y: scroll` to `overflow-y: auto`. — Mooseman, Jan 23 '13 at 00:12
@Mooseman I tried this but did not work, I included it in fiddle here:http://jsfiddle.net/m4HB3/8/ — user1830984, Jan 23 '13 at 01:06

Mathew Thompson · Accepted Answer · 2013-01-25T00:32:20.673

2

Try this Fiddle: http://jsfiddle.net/m4HB3/29/

I simply wrapped your table into a container div with an ID of container, removed your overflow properties from the table and set the following on the containing div (you can change the height to whatever you want, I just left it as 75 to demonstrate):

#container
{
    height: 75px;
    overflow-x: auto;
}

EDIT: After a few tweaks, this is what he wanted http://jsfiddle.net/m4HB3/37/

edited Jan 25 '13 at 00:32

answered Jan 25 '13 at 00:06

Mathew Thompson

55,877
15
127
148

You are 90% there, only issue is I do not want the scroll bar on the side to be placed next to the table heading, want to place next to the td tags. I tried moving the div above the second table but it doesn't like that as no content displayed. But if you can get it placed by the side of the td tags only then bounty is yours – user1830984 Jan 25 '13 at 00:23
Perfect, thank you very much, it will let me award bounty in 23 hours so I will give you bounty tommorow – user1830984 Jan 25 '13 at 00:31
@user1830984 No problems, glad I could help! – Mathew Thompson Jan 25 '13 at 00:32
If you don't mide can you look at this fiddle, I just implemnted what you have done but included extra columns, it looks a little messy but do you know what is causing the bad alignment between the table headings and the table column? This is just a favour I am asking if you don't mind? http://jsfiddle.net/m4HB3/57/ – user1830984 Jan 25 '13 at 01:17
@user1830984 Sure, try this fiddle that looks a lot neater http://jsfiddle.net/m4HB3/58/ – Mathew Thompson Jan 25 '13 at 01:19
Hi, thanks for your attempt but it still doesn't seem aligned, if you look at the table columns, they are not aligned with their table headings. I wil/ changed the content from words to numbers in the fiddle and you can see what I mean. Each number means that the column and the heading with the same number must have their column aligned with each other – user1830984 Jan 25 '13 at 01:27
@user1830984 Try this, you had spelt `width` wrong on your second table: http://jsfiddle.net/m4HB3/61/ – Mathew Thompson Jan 25 '13 at 01:33
OMG, This shows that it is time to go to sleep now lol. You seem alright even though its 1:40 am in the UK haha. Thanks again buddy :) – user1830984 Jan 25 '13 at 01:40
@user1830984 I think you're right lol, I'm suprisingly sharp at this time of the **morning** :| – Mathew Thompson Jan 25 '13 at 01:40

score 0 · Answer 2 · answered Jan 25 '13 at 00:10

Not exactly addressing your specific goal but as a work around, you can add an additional TD to the end of the header and set it to the width of the scrollbar.

http://jsfiddle.net/m4HB3/28/

<thead>
    <tr>
        <th width="5%" class="questionno">Question No.</th>
        <th width="27%" class="question">Question</th>
        <th width="7%" class="option">Option Type</th>
        <th width="11%" class="image">Image</th>
        **<th width="8px" class=""></th>**
    </tr>
</thead>

This would at least make it appear more presentable.

score 0 · Answer 3 · edited May 23 '17 at 12:21

0

Here I have a complete explanation of CSS tables + scroll + Browsers

I hope you find it useful

edited May 23 '17 at 12:21

Community

1
1

answered Mar 17 '14 at 13:09

Albert Català

2,026
2
29
35

How to place scroll bar on side of table?

3 Answers3