冻结列垂直滚动问题

Frozen Columns Vertical Scroll Issue

本文关键字：问题 滚动 垂直 冻结      更新时间：2023-09-26

FIDDLE

我已经编写了代码来保持固定的前 2 列，其他列horizontally scrollable。

我的问题是，我想要一个fixed height设置为table，以便它也vertically scrollable。

<div class="table-responsive" style="width: 400px; overflow-x:scroll; margin-left:354px;">
<table class="table table-bordered" border="1">
    <thead>
        <tr class="tblHeadings">
            <th class="fixCol1 headCol">
                <div style="height: 40px;padding-top: 19px;">Code</div>
            </th>
            <th class="fixCol2 headCol">
                <div style="height: 40px;padding-top: 19px;">Name</div>
            </th>
            <th style="width:120px;height: 54px;">Days
                <input type="hidden" name="monthlyField" value="LD">
            </th>                
            <th style="width:120px;height: 54px;">EARNG1
                <input type="hidden" name="monthlyField" value="EARNG1">
            </th>
            <th style="width:120px;height: 54px;">EARNG2
                <input type="hidden" name="monthlyField" value="EARNG2">
            </th>                
            <th style="width:100px">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="fixCol1">GT001
                <input type="hidden" name="empID" value="1">
                <input type="hidden" name="empCode" value="GT001">
            </td>
            <td class="fixCol2">Brock</td>
            <td>
                <input type="number" max="31" step="0.01" value="" name="1|LD" class="form-control tdTextboxes">
            </td>
            <td>
                <input type="number" step="0.01" value="" name="1|WEEKOFF_DAYS" class="form-control tdTextboxes">
            </td>
            <td>
                <input type="number" step="0.01" value="" name="1|EARNG1" class="form-control tdTextboxes">
            </td>
            <td>
                <input type="number" step="0.01" value="" name="1|EARNG2" class="form-control tdTextboxes">
            </td>
            <td>
                <input type="number" step="0.01" value="" name="1|EARNG3" class="form-control tdTextboxes">
            </td>
            <td>
                <input type="number" step="0.01" value="" name="1|EARNG4" class="form-control tdTextboxes">
            </td>
            <td>
                <input type="number" step="0.01" value="" name="1|EARNG5" class="form-control tdTextboxes">
            </td>
            <td>
                <button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'1')">Delete</button>
            </td>
        </tr>
        <tr>
            <td class="fixCol1">GT002
                <input type="hidden" name="empID" value="2">
                <input type="hidden" name="empCode" value="GT002">
            </td>
            <td class="fixCol2">John</td>
            <td>
                <input type="number" max="31" step="0.01" value="" name="2|LD" class="form-control tdTextboxes">
            </td>
            <td>
                <input type="number" step="0.01" value="" name="2|WEEKOFF_DAYS" class="form-control tdTextboxes">
            </td>
            <td>
                <input type="number" step="0.01" value="" name="2|EARNG1" class="form-control tdTextboxes">
            </td>
            <td>
                <input type="number" step="0.01" value="" name="2|EARNG2" class="form-control tdTextboxes">
            </td>
            <td>
                <input type="number" step="0.01" value="" name="2|EARNG3" class="form-control tdTextboxes">
            </td>
            <td>
                <input type="number" step="0.01" value="" name="2|EARNG4" class="form-control tdTextboxes">
            </td>
            <td>
                <input type="number" step="0.01" value="" name="2|EARNG5" class="form-control tdTextboxes">
            </td>
            <td>
                <button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'2')">Delete</button>
            </td>
        </tr>
        <tr>
            <td class="fixCol1">GT003
                <input type="hidden" name="empID" value="3">
                <input type="hidden" name="empCode" value="GT003">
            </td>
            <td class="fixCol2">Walker Ross</td>
            <td>
                <input type="number" max="31" step="0.01" value="" name="3|LD" class="form-control tdTextboxes">
            </td>
            <td>
                <input type="number" step="0.01" value="" name="3|WEEKOFF_DAYS" class="form-control tdTextboxes">
            </td>
            <td>
                <button class="btn pr-btn-black-sm" type="button" onclick="deleteRecord(this,'3')">Delete</button>
            </td>
        </tr>
    </tbody>
</table>

由于看起来您正在使用 Bootstrap，因此我冒昧地对您想要实现的目标进行了 Bootply 演示。

您实际上已经有了解决方案，唯一的事情就是将固定高度应用于table-responsive类而不是table类。

所以我只是height:200px;添加到正确的类中（顺便说一句，通常尽量避免内联样式）。

相关文章：