css - 使表格可滚动并固定第一列和最后一列

Question

我有一个包含以下 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 宽度(具有最大宽度:630px;)中没有固定，它展开。

请解决任何问题.........

Answer 1

您可以使用 freezeHeader(一个简单的 jquery 插件来卡住 html 表格中的标题行) Reference

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 demo