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

Question

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

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

上图显示了我尝试过的内容，包含表格的元素具有水平滚动的溢出-x：自动，而元素具有垂直的样式=“ display：block; height：400px; overflow-y：auto”滚动查找固定的表头。还有一些元素包含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