具有固定第一行和第一列的可滚动 html table，以及 table 单元格内的 angular material 控件

Question

我想在不使用 jquery 的情况下实现以下结果：

table 数据应在两个轴上滚动。
第一列 (table header) 和 table 的第一行应该是固定的，并且根据输入的数据，类似于 google 电子表格

上图显示了我的尝试，包含 table 的元素具有 overflow-x: auto 用于水平滚动，元素具有 style="display:block;height:400px;overflow-y:auto" 用于垂直滚动固定 table header。还有一些元素包含 mat-elements

以下是上图的 html 代码：

<div style="overflow-x:auto">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Textbox_1</th>
                    <th>Textbox_1</th>
                    <th>Multichoice</th>
                </tr>
            </thead>
            <tbody style="display:block;height:400px;overflow-y:auto">
                <tr>
                    <td>1</td>
                    <td><div>John</div></td>
                    <td><div>Ron</div></td>
                    <td><div><mat-select><mat-option>One</mat-option>
                                         <mat-option>Two</mat-option>
                             </mat-select>
                        </div>
                    </td> 
                </tr> 
            </tbody>
        </table>
    </div>

预期结果：

非常感谢任何帮助。

Answer 1

我认为仅 CSS 是不可能的。您可能需要 JavaScript/JQuery 的支持。看看这个轻量级插件。一定能帮到你。

https://github.com/nitsugario/jQuery-Freeze-Table-Column-and-Rows

具有固定第一行和第一列的可滚动 html table，以及 table 单元格内的 angular material 控件

Scrollable html table with fixed first row and first column, along with angular material controls within the cells of table

html

css

angular-material-7