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宽度（having max-width: 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

使表可滚动并修复第一列和最后一列

1 个答案: