Javascript Bootstrap4响应表-修复了第一列

Javascript Bootstrap4响应表-修复了第一列,javascript,jquery,html,css,bootstrap-4,Javascript,Jquery,Html,Css,Bootstrap 4,我正在创建一个包含事件和小时的日程表,所以我需要在表水平滚动时修复第一列。这将帮助用户更容易地查看活动的时间。我用的是bootstrap4。表的屏幕截图: 致以最诚挚的问候 表格{ 字体系列:arial,无衬线; 边界塌陷:塌陷; 宽度:100%; } td,th{ 边框:1px实心#dddddd; 文本对齐:左对齐; 填充:8px; } th { 背景色:黑色; 颜色:白色; } th:第一个孩子,td:第一个孩子 { 位置:粘性; 左:0px; } td:第一个孩子 { 背景颜色:灰色; }

我正在创建一个包含事件和小时的日程表,所以我需要在表水平滚动时修复第一列。这将帮助用户更容易地查看活动的时间。我用的是bootstrap4。表的屏幕截图:

致以最诚挚的问候
表格{
字体系列:arial,无衬线;
边界塌陷:塌陷;
宽度:100%;
}
td,th{
边框:1px实心#dddddd;
文本对齐:左对齐;
填充:8px;
}
th
{
背景色:黑色;
颜色:白色;
}
th:第一个孩子,td:第一个孩子
{
位置:粘性;
左:0px;
}
td:第一个孩子
{
背景颜色:灰色;
}

时间
单位
单位
单位
单位
单位
单位
接触
国家
11:40   
玛丽亚·安德斯
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
11:40   
玛丽亚·安德斯
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
莫特祖马商业中心
张锦松
墨西哥
11:40   
玛丽亚·安德斯
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
恩斯特·汉德尔
罗兰·孟德尔
奥地利
11:40   
玛丽亚·安德斯
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
岛屿贸易
海伦·贝内特
英国
11:40   
玛丽亚·安德斯
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
笑巴克斯酒窖
田纳西
加拿大
11:40   
玛丽亚·安德斯
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
马加兹尼营养不良
乔瓦尼·罗维利
意大利

您是否尝试过使用数据表?裁判:是的。它改变了所有的表格,使其更小,并添加了搜索栏-我不需要的东西。请添加您的代码,以便我们可以帮助您使用。如果可以删除搜索栏,请使用设置列宽DATATABLES@GhoSTBG请添加codeupvoted,如果除固定列外还需要固定标题,如何管理onscroll事件,我见过的大多数解决方案都是使用原始标题中的数据复制div,然后在scroll上对其进行偏移,在这种情况下,向左和向右滚动会发生什么情况?另外,位置粘性是个坏主意,似乎不是一个得到广泛支持的东西