The scroll bar is currently cropped under the column of the final table.

Question

Which causes the scrollbar that cannot be cropped on the table side in this script: http://jsfiddle.net/m4HB3/8/ Currently it is under the last column, which means that it occupies some space of these columns and thus , causes alignment problems with the table.

The table headers are fixed, since I need a scroll table with fixed headers.

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

Can someone please also write your response to the script outside of jsfiddle and put it directly in the browser because I saw examples where something works in jsifddle but then it doesn’t work in the main application in the 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">AE</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">AF</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 script that works fine. But if you copy the code to standard html, the columns will not be aligned. If you can correctly align the columns with your headings with a scroll bar on the side of the table, then this would be a great answer

Answer 1

Is this something that might work for you?

Using here script / jQuery in your div to scroll, slightly modified css to scroll to the side.

See: http://jsfiddle.net/m4HB3/177

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

I did not spend much time on css, but I am sure that you could make it beautiful.

 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 the static table width (which will also fix your problem):

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

Answer 2

Here is a fiddle based on Sara's related question :

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">AE</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">AF</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">AE</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">AF</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">AE</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">AF</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">AE</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">AF</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%; }