如何在css中创建固定的垂直和水平表格？

Question

我正在尝试在表格的顶部和最左边创建一个具有固定变量的2D表格。我已经添加了水平和垂直标题，但我不太确定如何解决这些问题，以便观看者可以滚动浏览数据。

CSS + HTML：

.fixed-tables { 
 
    position: relative background: white; 
 
} 
 

 
.fixed-tables th { 
 
    position: absolute; 
 
    background: white; 
 
}

<table class="table fixed-tables"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th>Hor. Header 1</th> 
 
     <th>Hor. Header 2</th> 
 
     <th>Hor. Header 3</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <th>Ver. Header 1</th> 
 
     <td>(null)</td> 
 
     <td>(null)</td> 
 
    </tr> 
 
    <tr> 
 
     <th>Ver. Header 2</th> 
 
     <td>(null)</td> 
 
     <td>(null)</td> 
 
    </tr> 
 
    <tr> 
 
     <th>Ver. Header 3</th> 
 
     <td>(null)</td> 
 
     <td>(null)</td> 
 
     <td>(null)</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

这并不完全工作，因为数据和头互相重叠。任何意见是极大的赞赏。

Answer 1

每当我尝试创建具有固定标题或列的表时，我都使用数据表。它令人难以置信的强大，并提供你在找什么。

https://datatables.net/