冻结顶列和左行

Question

我正在一个项目上，我需要冻结表中的第一列和第一行，同时垂直和水平滚动。到目前为止，我只能冻结第一行。 如果有一些纯HTML CSS解决方案，那就太好了，但我对任何可与Angular 5兼容的插件都可以使用javascript 预先感谢。

Answer 1

我为仪表板网站编码时遇到了同样的问题。我用谷歌搜索。互联网上有很多解决方案。在这里，我给出了最简单的方法，只需要HTML，CSS和Jquery。解决此问题的关键是使用<div>标签和absolute位置。

下图显示了如何解决问题。

创建具有固定行和列的表的3个步骤

1。创建表

<div class="green">
        <table>
            <thead>
                <tr>
                    <th class="width_200">No</th>
                    <th class="width_200">Name</th>
                    <th class="width_200">Class</th>
                    <th class="width_200">Teacher</th>
                    <th class="width_200">School</th>
                    <th class="width_200">Birthday</th>
                </tr>
            </thead>
        </table>
    </div>

1. 将每个div布置在正确的位置

.outer {
		position: relative;
		overflow: hidden;
		}
	
	.green {
		overflow: hidden;
	}
  
  .orange {
		overflow: scroll;
		position: relative;
	}
  
  .blue {
		position: absolute;
		top: 50px;
	}
	
	.red {
		position: absolute;
		top: 0;
	}
	

1. 使用简单的JQuery制作动画部分

var tb=$('.outer');
	var tbLeft=tb.children('.blue');
	var tbTop=tb.children('.green');
	var tbMain=tb.children('.orange');

    var leftTop = parseInt(tbLeft.css('top'));
    tbMain.scroll(function() {		
        tbLeft.css('top',leftTop - tbMain.scrollTop()+'px');
        tbTop.scrollLeft(tbMain.scrollLeft());
    });