Javascript 修复引导表的第一列

我按照@koala_dev的代码来尝试锁定第一列的水平滚动。不幸的是，代码对我的表没有影响。我想知道是否有人能给我一些关于我做错了什么的建议，因为我是编程新手

这是我的桌子：

这是我在JS中插入的代码（第121-133行）：

这是我插入的CSS属性（第36-47行）：

.table-responsive > .fixed-column {
   position: absolute;
   display: inline-block;
   width: auto;
   border-right: 1px solid #ddd;
}

@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

我唯一偏离的是，我将

$（'.table'）

定义为

$tableClass

，而不是

$table

，因为我以前将

var$table

定义为

$（'.\table'）

。非常感谢您的帮助

$（“#table”）

表示通过id

table

查找元素

$（'.table'）

表示按类查找元素

表

这些是您在CSS中使用的CSS选择器

在您的例子中，您的表具有id

table

，因此您可以使用

$（“#table”）

选择该表

---

而且您没有任何使用class

table

的html元素，因此当您选择使用

$（'.table'）

确定时，您将一无所获。。删除所有

js

代码，您可以使用以下CSS技巧来完成此操作：

CSS

.table > thead:first-child > tr:first-child > th:first-child {
    position: absolute;
    display: inline-block;
    background-color: red;
    height: 100%;
}

.table > tbody > tr > td:first-child {
    position: absolute;
    display: inline-block;
    background-color: red;
    height: 100%;
}

.table > thead:first-child > tr:first-child > th:nth-child(2) {
    padding-left: 40px;
}

.table > tbody > tr > td:nth-child(2) {
    padding-left: 50px !important;
}

---

只需将

位置：sticky

添加到th&td第一个孩子

th:第一个孩子，td:第一个孩子
{
位置：粘性；
左：0px；
背景颜色：灰色；
}

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

以下样式将创建第一列固定的精简表格：

th:first-child, td:first-child{
    position: sticky;
    left: 0px;
    z-index: 1;
}
tr:nth-child(odd) > td{
    background-color: #ededed;
}
tr:nth-child(even) > td{
    background-color: #e2e2e2;
}
tr:nth-child(odd) > th{
    background-color: #d7d7d7;
}

---

在您的演示中有一行var

$tableClass=$（'.table'）

即，您正试图获取与类相关的表对象，但您已将

表

作为

表

而不是

类名

作为

表

给出了

表

，感谢您指出这一点！我用ID引用了这个表，但是我得到了这样一个信息：你能给我一些提示吗？你的代码很混乱！！为什么要克隆

表

，为什么要删除除第一列以外的所有

表数据

和

表头

？因为我想在表向右滚动时锁定第一列，因为我有很多列，就像这个人做的那样：是的，我得到了！！但是你可以用

css

来做，对吗？？为什么要进行

克隆

和再次插入以及所有这些？感谢您指出我没有

类表

。我意识到我把

表

放在

数据类

的内部。我听从了你的建议，用它的ID引用了这个表，但我得到了这样一个结果：我的代码冲突吗？太神奇了！谢谢！这是一个优秀的纯CSS解决方案，它将从另一篇参考文章中的JS&CSS混乱中剔除@谢哈潘卡。对不起，我看到它还在工作。。你能告诉我什么不起作用吗…？（无法格式化，倒勾是换行符）只有下面的部分对我来说足够好（使用引导表插件）：`/*确保所有行都填充在固定列前面*/

.table>thead>tr>th{

左填充：40px！重要；

]
`

/*使用绝对定位固定列*/

.table>tbody>tr>td:first child{

位置：绝对；

宽度：40px；

}
``演示似乎对我不起作用；假设getData按钮用于填充表？
th:first-child, td:first-child{
    position: sticky;
    left: 0px;
    z-index: 1;
}
tr:nth-child(odd) > td{
    background-color: #ededed;
}
tr:nth-child(even) > td{
    background-color: #e2e2e2;
}
tr:nth-child(odd) > th{
    background-color: #d7d7d7;
}