Question

我有一个关于html表的问题，我知道一个有这个的Windows应用程序，一个垂直可滚动的表，但是一些列固定在页面上，而其他列总是在页面之外。我有一个例子：

黑色边框是页面，具有响应性。
红色边框是表格。
绿色边框是页面上始终全屏的部分，总是使用相同的列。
蓝色边框总是在屏幕外面不需要的信息，但如果您需要，可以滚动到右边。

任何人都知道如何做到这一点？在CSS？或者我需要Javascript吗？

我目前的代码：此类附加到标记。

/*MAIN TABLE*/
.tableMain {
    font-size: 13px;
    margin: 0;
    padding: 0;
    width: 200%;
    table-layout: fixed;
}

但我认为我需要2个类，1个页面类，1个页面类，所以我可以定义应该在页面之外的列。但我真的不知道该怎么做。目前我已经用这个想法编辑了我的标题单元。

.tableCell, .tableHeaderCell{
    width: 8.5%;
}

.tableSecondCell{
    width: 150px;
}

这是我目前的HTML：

<table class='tableMain'>
    <thead class='tableHeader'>
        <tr class='tableHeaderRow'>
            <th class='tableCell'>Name</th>
            <th class='tableCell'>Email</th>
            <th class='tableCell'>Role</th>
            <th class='tableCell'>Username</th>
            <th class='tableCell'>Department</th>
            <th class='tableSecondCell'>Team</th>
            <th class='tableSecondCell'>Web</th>
            <th class='tableSecondCell'>App</th>
        </tr>
    </thead>
    <tbody class='tableBody'>
        <tr class='tableRow'>
            <td class='tableCell'>User Name</td>
            <td class='tableCell'>username1@example.com</td>
            <td class='tableCell'>employee</td>
            <td class='tableCell'>username1</td>
            <td class='tableCell'>Support</td>
            <td class='tableSecondCell'>Team1</td>
            <td class='tableSecondCell'>True</td>
            <td class='tableSecondCell'>True</td>
        </tr>
    </tbody>
</table>

感谢您的时间。

Answer 1

您可以在css下方使用该表格来滚动

.tableMain {
    width: 100%;
    max-width: 100%;
}

并围绕表标记

包装div .table-responsive

.table-responsive {
    min-height: .01%;
    overflow-x: auto;
}

固定在页面上的HTML / CSS表格列和其他页面总是在屏幕外滚动

1 个答案: