jquery - 最初の列を固定し、残りをテーブル内でスクロール可能にします

Question

私のテーブルでは、最初の列をフリーズし、tdがオーバーフローした場合に他の列をスクロール可能にします。

ここでjsfiddleで試しましたが、期待どおりに機能していません。

100行になる可能性があります。

最初の列を修正する必要があり、他の列がある部分はスクロール可能ですが、個々のtdは固定されたままになります–よろしくお願いします

Answer 1

完璧ではありませんが、ユースケースやHTMLの生成方法によっては、次のようなことができます。

HTML

<table id="main">
    <tr>
        <td class="first"> what are the possible values?</td>
        <td rowspan="2">
            <div class="rest">
            <table>
                <tr>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
                    <td>400</td>
                    <td>500</td>
                    <td>600</td>
                    <td>700</td>
                    <td>800</td>
                    <td>900</td>
                    <td>1000</td>
                    <td>1100</td>
                </tr>                        
                <tr>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
                    <td>400</td>
                    <td>500</td>
                    <td>600</td>
                    <td>700</td>
                    <td>800</td>
                    <td>900</td>
                    <td>1000</td>
                    <td>1100</td>
                </tr>                        
                </table>
            </div>
        </td>
    </tr>
    <tr class="first_column">
        <td class="first"> what are the possible values?</td>
    </tr>
</table>​

CSS

table {
    border-collapse: collapse;
}
table#main {
    border-top: 1px solid #DFDFDF;
    margin-bottom: 1em;
    width:400px;
    display: block;
}
table#main .first {
    width:200px;
    white-space: nowrap;
}
table#main .rest {
    overflow: scroll;
    background: silver;
    width:200px;
}
table td.first, table .rest td {
    line-height: 1.5em;
    padding: 0.5em 0.6em;
    text-align: left;
    vertical-align: middle;
    text-align: left;
}

<strong>PSこれはSafari6とFirefox12、13、14のOSXでのみテストしました</ p>