html - 具有固定第一行和第一列的可滚动 html 表格，以及表格单元格内的角度材料控件

Question

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

1. 两个轴的数据应可滚动的表。
2. 表格的第一列（表头）和第一行应该是固定的，并且根据输入的数据可以自动调整列的宽度，类似于谷歌电子表格

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

以下是上图的 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