2

ここに jsfiddle があります: http://jsfiddle.net/m4HB3/

正しく機能している固定ヘッダー付きのスクロール テーブルがあります。私が抱えている問題は、スクロールバーが配置されている場所です。最後の列の下にわずかに配置されているため、最後の列のスペースの一部が占有され、他の列がずれて移動します。

私の質問は、スクロールバーをテーブルの右側にクリップして、列のスペースを占有しないようにするにはどうすればよいですか?

以下は、サンプル テーブルの 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: 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;
}
4

3 に答える 3

2

このフィドルを試してください: http://jsfiddle.net/m4HB3/29/

の ID をtable持つコンテナにあなたをラップし、テーブルからプロパティを削除し、含まれている div に次のように設定しました (高さは好きなように変更できます。デモ用に 75 のままにしました)。divcontaineroverflow

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

編集：いくつかの微調整の後、これは彼が望んでいたものですhttp://jsfiddle.net/m4HB3/37/

于 2013-01-25T00:06:43.033 に答える
0

特定の目標に正確に対応しているわけではありませんが、回避策として、ヘッダーの最後に追加の TD を追加し、それをスクロールバーの幅に設定できます。

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>

これにより、少なくとも見栄えが良くなります。

于 2013-01-25T00:10:19.690 に答える
0

ここにCSSテーブル+スクロール+ブラウザの完全な説明があります

お役に立てば幸いです

于 2014-03-17T13:09:11.547 に答える