0

以下のhtmlのテーブルがあります

<div class="wrapper">
    <div class="tblWrapper">
        <table id="tbl">
            <thead>
                <tr>
                  <th class="first">header</th>
                  <th>header</th>
                  <th>header</th>...........<th class="last">header n</th>                        
                </tr>
            </thead>
            <tbody>
                <tr><td class="first"></td><td></td><td></td><td class="last"></td></tr>
            </tbody>
        </table>
    </div>
</div>

CSS

.wrapper{ position: relative; }
.tblWrapper{
    width: 98%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    #tbl{ .first, .last{ position: absolute; } }
}

ここで達成しようとしているのは、最初と最後の列を固定し、残りの列をスクロール可能にする必要があることです。

ここでの問題は、固定された列が他の列とオーバーラップすることです。他の問題は、テーブル全体が親の div width( having max-width: 630px;) で固定されていないことです。

回避策があればお願いします........

4

1 に答える 1

0

使用できますfreezeHeader（htmlテーブルのヘッダー行をフリーズする簡単なjqueryプラグイン） リファレンス

HTML : 

<div class="wrapper">
    <div class="tblWrapper">
        <table id="tbl">
            <thead>
                <tr>
                  <th class="first">header</th>
                  <th>header</th>
                  <th>header</th>
                  <th class="last">header </th>                        
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>txt</td>
                    <td>txt</td>
                    <td> txtxtxtxtxtxtxtxtxt txtxtxtxtxtxtxtxtxt txtxtxtxtxtxtxtxtxt</td>
                    <td>txt</td>
                </tr>

                ...
                ...
                ...

                <tr>
                    <td>txt</td>
                    <td>txt</td>
                    <td>txt</td>
                    <td>txt</td>
                </tr>

            </tbody>
        </table>
    </div>
</div>

CSS :

thead tr th {
    border-top: 1px solid #E2E6E6;
    border-bottom: 3px solid #E5E5E5;
    vertical-align: middle;

}
th {
    color: white;
    background:gray;
}
th, td {
    text-align: left;
    padding: 5px 10px;
    border-bottom: 1px solid #E5E5E5;
}

脚本 ：

    $(document).ready(function () {
        $("#tbl").freezeHeader();
    })

Jsfiddle デモ

于 2014-09-01T07:01:04.397 に答える