7

What is causing scroll bar to not be clipped on side of table in this fiddle: http://jsfiddle.net/m4HB3/8/ At the moment it is underneath the last column, meaning it is taking up some of that columns space and thus causing alignment issues with the table.

The table headers are fixed as I want a scrolling table with fixed headers.

Could the problem be the width set for the table and individual columns?

Can somebody please also text their answer on a script outside jsfiddle and put it straight on a browser because I have seen examples where something is working in jsifddle but then not working in main application on browser.

HTML:

   <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>

CSS:

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

#tableqanda_onthefly
{
    width:100%;
    overflow-y: auto;
    overflow-x: hidden;
    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;
}

UPDATE:

http://jsfiddle.net/m4HB3/37/

I have a js fiddle which works perfectly. But if you copy code into a standard html, the columns are not aligned. If you can get the columns aligned correctly with their headings with the scroll bar on the side of the table, then that will be perfect answer

user1830984
  • 859
  • 3
  • 14
  • 26
  • [Related question](http://stackoverflow.com/questions/13043837/scrollable-table-with-fixed-header) – Sara Jan 24 '13 at 21:31
  • @Sara Hi, the table I have does work well when it comes to scrolling table with fixed headers, it is just the placement of the scroll bar. But I will look at the link you provided me and hopefully be able to get the scroll bar in the right posistion – user1830984 Jan 24 '13 at 21:56
  • 1
    The [link in the comment](http://www.imaputz.com/cssStuff/bigFourVersion.html) (also used in the answer) is a really good example of what you're trying to achieve. – Sara Jan 24 '13 at 22:06
  • Yeah but problem is look at scroll bar, it is slightly underneath the last column, I want to clip it at side of the column – user1830984 Jan 29 '13 at 01:01
  • I don't think you'll be able to achieve this without javascript. In this case you could probably wrap divs around 2 tables and give them padding to align it properly but problem here is that scrollbar might look different in other systems, computers and browsers. And this will cause another issue. – Webapper Jan 29 '13 at 01:38

2 Answers2

1

Is that something what could work for you?

Using here script/jQuery within your div to scroll, slightly modified css to give side scrolling.

Please see: http://jsfiddle.net/m4HB3/177

Here's standalone version: http://webapper.pl/demo.html

I didn't spend much time on css but i'm sure you could make it look pretty.

var ele = $('.scroll');
var scroll = 25;

$('.up').on('click',function() {
        ele.scrollTop( ele.scrollTop() - scroll );
});

$('.down').on('click',function() {
        ele.scrollTop( ele.scrollTop() + scroll );
});

Or you can use static table width (that would also fix your problem):

http://jsfiddle.net/m4HB3/178/

Webapper
  • 305
  • 2
  • 8
  • if use JS i would just implement "fixed width" solution, with detecting of collumn widths – zb' Jan 29 '13 at 02:47
  • I will like the static web version because my partner is doing the front end design and he will make it look good. Problem is that scroll bar is not clipped in static table. But your jquery version will be great for other people so you would get an upvote. Now I have just done a fiddle which get the scroll bar clipped to the side of the table, but in standard version, the columns are not aligned, if you can get this working in standard version where scroll bar is clipped on side and columns are aligned, then you have sorted it out for me. http://jsfiddle.net/m4HB3/37/ – user1830984 Jan 29 '13 at 03:02
  • @user1830984 There is a problem with your new fiddle. Safari in OSX has no scrollbar width, and your table below is wider than its headings. – Antony Jan 29 '13 at 03:09
  • @Antony Yeah the table wide than headers is the main problem in the standard html app anyway. Im assuming the scroll width is a problem in the standard html as well. Have you got another browser you can check this out on? – user1830984 Jan 29 '13 at 03:21
  • Antony is right, you won't be able to make it look right in different browsers and operating systems. I can also see than in firefox if there's not enough space for scrollbar or buttons they don't appear. And I'm sure you want users to be able to click on those buttons. http://webapper.pl/demo2.html – Webapper Jan 29 '13 at 03:26
  • @WebApper You can [detect the scrollbar width](http://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes): http://jsfiddle.net/tqxyN/4/ – Antony Jan 29 '13 at 03:36
  • @Antony What is strange though is I had a similar table which worked perfectly with static approach and worked in html in all browsers. But when I try to implement it with this table, it doesn't work for this table. Let me post this code but give me time for this – user1830984 Jan 29 '13 at 03:58
  • @WebApper See comment above – user1830984 Jan 29 '13 at 04:09
  • @Antony I am using windows 7 and tested in all browsers and it works fine. So it must me problem with OSX. Can I ask does the jquery version webApper showed works in your OS? Do you think this would work on all browsers and OS? – user1830984 Jan 29 '13 at 04:25
  • @user1830984 It works but you will need to include jQuery just for that matter. Mine doesn't need jQuery. jQuery works in all browsers and OS though. – Antony Jan 29 '13 at 04:28
  • @Antony That will be no problem as I use jquery code anyway, ok I will give this method a go and see what happens and comment back here on outcome – user1830984 Jan 29 '13 at 04:29
  • @Antony Is the scroll bar in the correct place in your screen when you open up the jquery scroll bar version in standard html? Only because I see that in fiddle the padding has to be 20px? – user1830984 Jan 29 '13 at 04:34
  • @user1830984 It does have a padding in Safari and Firefox, that is, the scrollbar is detached from the right side of the table. Have you tried mine in your local browser (not inside jsfiddle)? – Antony Jan 29 '13 at 04:39
  • @Antony Tried it on local browser, scroll bar is not displayed, if I drag arrow down it does a scroll – user1830984 Jan 29 '13 at 04:57
  • @Antony Did you mean the scroll bar is placed in the right place in your browser? IS it in a good position or is it too far away? – user1830984 Jan 29 '13 at 04:59
  • @user1830984 The scrollbar is immediately to the right of the table. You may have a problem trying to drag since the height is too small. – Antony Jan 29 '13 at 05:02
  • @user1830984 It is better to subtract the scrollbar width from the headings or it may cause a horizontal overflow of the document window: http://jsfiddle.net/tqxyN/5/ – Antony Jan 29 '13 at 05:10
  • @Antony Same as original problem when testing in standard html when using the code in your updated fiddle, scroll bar clipped just slightly underneath the last column. With the code in the previous fiddle it did not show the scroll bar at all – user1830984 Jan 29 '13 at 05:19
  • @user1830984 That _slight_ clipping is due to the browser's rendering of width in `%`. If you use `px` the problems would be fixed. – Antony Jan 29 '13 at 05:23
  • @user1830984 You may want to continuously fix the width as the browser size is changed if you want to stick with `%`: [CSS: Setting width/height as Percentage minus pixels](http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels) – Antony Jan 29 '13 at 05:28
  • @user1830984 I really don't think you'll be able to get it right with css and html only. There always will be a problem (like one I have found with firefox for example where scrollbar is to small and it doesn't show up. And even if you get it right after 5 days why bother? When you can use jQuery pseudo scrollbar and it will work in all nowadays browsers. + You can make it look as you want it without worrying about how it's going to affect table alignment. And yes you can start playing with detecting table/column widths but again you will need JS and it's just more unnecessary work. – Webapper Jan 29 '13 at 13:13
0

Here is a fiddle based on the linked question by Sara:

DEMO

html

<div id="tableContainer" class="tableContainer">
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="scrollTable">
    <col width="10%" />
    <col width="54%" />
    <col width="14%" />
    <col width="22%" />
    <thead class="fixedHeader">
        <tr>
            <th class="questionno">Question No.</th>
            <th class="question">Question</th>
            <th class="option">Option Type</th>
            <th class="image">Image</th>
        </tr>
    </thead>
    <tbody class="scrollContent">
        <tr>
            <td class="questionno">1</td>
            <td class="question">What is a RAM?</td>
            <td class="option">A-E</td>
            <td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
        </tr>
        <tr>
            <td class="questionno">2</td>
            <td class="question">Name 3 car maneuvers you may do in a test?</td>
            <td class="option">A-F</td>
            <td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
        </tr>
        <tr>
            <td class="questionno">3</td>
            <td class="question">What is a RAM?</td>
            <td class="option">A-E</td>
            <td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
        </tr>
        <tr>
            <td class="questionno">4</td>
            <td class="question">Name 3 car maneuvers you may do in a test?</td>
            <td class="option">A-F</td>
            <td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
        </tr>
        <tr>
            <td class="questionno">5</td>
            <td class="question">What is a RAM?</td>
            <td class="option">A-E</td>
            <td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
        </tr>
        <tr>
            <td class="questionno">6</td>
            <td class="question">Name 3 car maneuvers you may do in a test?</td>
            <td class="option">A-F</td>
            <td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
        </tr>
        <tr>
            <td class="questionno">7</td>
            <td class="question">What is a RAM?</td>
            <td class="option">A-E</td>
            <td class="imagetd"><ul class="qandaul"><li>Lighthouse_4.jpg</li></ul></td>
        </tr>
        <tr>
            <td class="questionno">8</td>
            <td class="question">Name 3 car maneuvers you may do in a test?</td>
            <td class="option">A-F</td>
            <td class="imagetd"><ul class="qandaul"><li>Tulips_3.jpg</li></ul></td>
        </tr>
    </tbody>
</table>
</div>

css

div.tableContainer {
    clear: both;
    border: 1px solid #963;
    overflow: auto;
}

html>body tbody.scrollContent {
    display: block;
    height: 100px;
    overflow: auto;
    width: 100%
}


html>body thead.fixedHeader tr {
    display: block
}

html>body td {
    box-sizing: border-box;
    border: 1px solid grey;
}

table .questionno {
    width: 10%;
}
table .question {
    width: 54%;
}
table .option {
    width: 14%;
}
table .image {
    width: 22%;
}
Community
  • 1
  • 1
Alp
  • 29,274
  • 27
  • 120
  • 198
  • Hi, I know how to make a scrolling table with ixed table as my table does this, it is the alignment of the columns which is my issue. Your fiddle doesn't align columns properly with its headings. The Option Type heading is not aligned with its column underneath. Appreciate effort though. Is there a way you can attempt fiddle with my code and change css? Then do it in a normal script and show it on browser? IF you get this right then you cracked it – user1830984 Jan 29 '13 at 02:14
  • I have got the jsfiddle work in what I wanted, if you can get it working in standard html page, then great because columns are not aligned in standard version: http://jsfiddle.net/m4HB3/37/ – user1830984 Jan 29 '13 at 03:03