Javascript 如何在IE11中为HTML表实现粘性头?
我正在为一个仍在使用InternetExplorer11的客户机使用HTML、Bootstrap、CSS和JS(以及jQuery)构建一个表。我找不到一种方法,使其标题粘在IE中 我目前正在使用Javascript 如何在IE11中为HTML表实现粘性头?,javascript,html,jquery,css,bootstrap-4,Javascript,Html,Jquery,Css,Bootstrap 4,我正在为一个仍在使用InternetExplorer11的客户机使用HTML、Bootstrap、CSS和JS(以及jQuery)构建一个表。我找不到一种方法,使其标题粘在IE中 我目前正在使用位置:sticky,它在所有三种主要浏览器(Edge、Chrome和Firefox)中都能正常工作。我知道IE不支持它。下面是我桌子的图片。它使用行span在标题中包含标题。 我尝试过不同的填充物和解决方案,但它们要么破坏了某些东西,要么就是不起作用 这是我在表格中使用的HTML和CSS tr>th{
位置:sticky
,它在所有三种主要浏览器(Edge、Chrome和Firefox)中都能正常工作。我知道IE不支持它。下面是我桌子的图片。它使用行span
在标题中包含标题。
我尝试过不同的填充物和解决方案,但它们要么破坏了某些东西,要么就是不起作用
这是我在表格中使用的HTML和CSS
tr>th{
文本对齐:居中;
字号:600;
字体系列:Arial、Helvetica、无衬线字体;
字体大小:12px;
}
.tr1>th{
位置:粘性;
排名:0;
盒影:1px 0px 0px 0px 212529;
}
.tr2>th{
位置:粘性;
顶部:93px;
盒影:1px 0px 0px 0px 212529;
}
泰德{
位置:粘性;
排名:0;
}
tr>td{
字体系列:Arial、Helvetica、无衬线字体;
字体大小:12px;
}
.添加btn{
字体大小:11px;
}
输入[type=“text”]{
宽度:100%;
框大小:边框框;
-webkit框大小:边框框;
-moz框大小:边框框;
/*背景色:红色*/
}
1.没有填料{
填充:0.25rem;
}
.没有输入{
保证金:0;
填充:0.4rem;
}
笨蛋
笨蛋
笨蛋
笨蛋
dummy1添加
笨蛋
dummy1添加
dummy1添加
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
因此,您希望在滚动表格时标题保持在原位
为什么不为您的桌子的t主体
设置一个固定的max height
,并添加overflow-y:auto
下面是一个例子:
//忽略这一点,这只是为了在表中填充虚拟数据,以便进行示例
$(文档).ready(()=>{
const dummy_data=new Array(10).fill(null).map(e=>`dummydummydummydummydummydummydummydummydummydummydummydummydummydummydummy`);
$(“#时钟表tbody”).append(虚拟#u数据)
})
tr>th{
文本对齐:居中;
字号:600;
字体系列:Arial、Helvetica、无衬线字体;
字体大小:12px;
}
tr>td{
字体系列:Arial、Helvetica、无衬线字体;
字体大小:12px;
}
.添加btn{
字体大小:11px;
}
输入[type=“text”]{
宽度:100%;
框大小:边框框;
-webkit框大小:边框框;
-moz框大小:边框框;
/*背景色:红色*/
}
/*表css*/
桌体{
显示:块;
高度:100px;
溢出:覆盖;
}
表tbody tr{
宽度:100%;
}
thead,tbody tr{
显示:表格;
表布局:固定;
}
笨蛋
笨蛋
笨蛋
笨蛋
dummy1添加
笨蛋
dummy1添加
dummy1添加
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
笨蛋
Google/Yahoo/Bing/DuckDuckGo/…->“ie11 sticky header site:stackoverflow.com”IE不支持sticky,你必须在IE中使用javascript解决方案来解决这个问题。你想要有一个垂直或水平的固定标题位置吗?据我所知,没有一个简单的HTML+CSS解决方案可以在没有固定列宽的情况下适用于ie11。(position:fixed
解决方案将使用固定列宽)。因此,您需要从前面的位置找到解决方案:sticky
,或者说它应该是IE11或类似的。有关搜索的详细信息。如果您想要固定标题的垂直位置。只需固定车身的最大高度
,这样你的行为就会很棘手。很抱歉回复太晚。我从来没有解决过这个问题,我采取了完全不同的方法。还是谢谢你。