7

このフィドルでスクロールバーがテーブルの側面で切り取られない原因は何ですか: 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 にコピーすると、列が整列しません。テーブルの横にあるスクロールバーを使用して、列を見出しと正しく整列させることができれば、それは完璧な答えです

4

2 に答える 2

1

それはあなたのために働くことができるものですか？

ここでスクリプト/jQueryをdiv内で使用してスクロールし、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/

于 2013-01-29T02:12:21.023 に答える
0

Saraによるリンクされた質問に基づくフィドルは次のとおりです。

デモ

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%;
}
于 2013-01-29T01:16:27.867 に答える