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

Question

我想在不使用 jquery 的情况下达到以下结果：

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

上图显示了我尝试过的内容，包含表格的元素有 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