滚动条当前被剪切在最终表格列的下方

Question

是什么原因导致滚动条没有被夹在这个小提琴的桌子一侧:http://jsfiddle.net/m4HB3/8/ 目前它位于最后一列的下方,意味着它占据了一些列空间和从而导致表格的对齐问题.

表标题是固定的,因为我想要一个带有固定标题的滚动表.

问题可能是表格和各列的宽度设置？

有人也可以在jsfiddle外面的脚本上发布他们的答案并直接放在浏览器上,因为我已经看到了jsifddle中有些工作但后来在浏览器的主应用程序中无法工作的示例.

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

更新:

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

我有一个完美的js小提琴.但是,如果将代码复制到标准html中,则列不会对齐.如果您可以使用表格侧面的滚动条将列与标题正确对齐,那么这将是完美的答案

Answer 1

这对你有用吗？

在你的 div 中使用这里的 script/jQuery 来滚动，稍微修改一下 css 以提供侧面滚动。

请参阅： http: //jsfiddle.net/m4HB3/177

这是独立版本： http: //webapper.pl/demo.html

我没有在 css 上花太多时间，但我相信你可以让它看起来很漂亮。

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

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

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

或者您可以使用静态表格宽度（这也可以解决您的问题）：

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