固定列标题，同时水平滚动

我正在尝试修复列标题，以便可以水平滚动并看到标题。我已经尝试了以下方法，但似乎没有用。如果您在屏幕截图中看到，如果我上下移动屏幕，标题似乎都不会停留在一个位置，并且重叠不正确。第一个td总是隐藏在th后面。

屏幕截图1

屏幕截图2

   th:first-child {
        position: fixed;

    } 

        th {
            position: fixed;
        }
.fixed-side {
    border:1px solid #000;
    background:#eee;
    visibility:visible;
}

的CSS

的HTML

    

        Fund Classes

         {{ isExpanded ? '-' : '+' }}
        

        

              Add
                Class
        
        

            Invested Only
        
    


    

        

            Loading... Please Wait
        
    
    

        


            
 {{ c }}

                    
                        

                            

                                {{ f.value.FundName}}
                            
                            
{{ f.value.Description}}
                            
                            

                                
                            
                            
{{f.value.Id}}
                            

                                
                                
                            
                            

                                {{ f.value.LegalFundClassName}}
                            
                            

                                
                                
                            
                            

                                {{ f.value.InceptionDate | date:"'MMM dd, yyyy"}}
                            
                            

                                
                            
                            

                                {{ f.value.InvestedAmount | number : '.2-2'}}
                            
                            

                                
                                
                            
                            

                                {{ f.value.VehicleTypeName}}
                            
                            

                                
                                
                            
                            

                                {{ f.value.ClosureStatusName}}
                            
                            

                                
                                Yes

                            
                            

                                {{ f.value.IsSidePocket == true ? 'Yes' : 'No'}}
                            
                            

                                
                                Yes
                            
                            

                                {{ f.value.IsThematic == true ? 'Yes' : 'No'}}
                            

                            


                                Edit
                                Save
                                Delete
                                Cancel

                            

                        
                    

                
    

更新1

尝试darthnach解决方案后，滚动时会有一个小问题。我可以在页边看到内容

的CSS

 th {
        padding: 7px;
        position: sticky;
        left:0;
        min-width: 300px;
        background-color:#f5f7f7;

        }

屏幕截图1

屏幕截图2

这是堆叠闪电战

stackblitz /edit/angular-d1mzew

更新2

修复了滚动时解决边框问题，但滚动时文本可见性仍然存在的问题