修复引导表的第一列

我跟在@ koala_dev的代码this post尝试锁定第一列，我的表水平滚动。不幸的是，代码对我的表没有影响。我想知道是否有人可以给我一些关于我做错了什么的指示，因为我是编程新手。修复引导表的第一列

这是我的表： http://jsfiddle.net/mademoiselletse/bypbqboe/59/

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

$(function() { 
    var $tableClass = $('.table'); 
    // Make a clone of our table 
    var $fixedColumn = $tableClass.clone().insertBefore($tableClass).addClass('fixed-column'); 

    // Remove everything except for first column 
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove(); 

    // Match the height of the rows to that of the original table's 
    $fixedColumn.find('tr').each(function(i, elem) { 
     $(this).height($tableClass.find('tr:eq(' + i + ')').height()); 
    }); 
});

这是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; 
    } 
}

我从demo code偏离的唯一的事情是，我定义为$('.table')$tableClass而不是$table，因为我之前已将var $table定义为$('#table')。您的帮助将非常感谢！

来源

2015-05-26 Vic

在您的演示有这$ var'$ tableClass = $（'。table'）;'即你试图让你的表对象引用类，但是你已经把'table'作为'table'而不是'classN ame'作为'表' –

感谢您指出！我通过ID引用表，但我得到这个： http://jsfiddle.net/mademoiselletse/bypbqboe/62/ 你能给我一些提示，为什么这是什么？ – Vic

你的代码很混乱！你为什么要克隆'table'，为什么要除去第一个表中的所有'table data'和'table head'？ –

确定..删除所有js代码，你可以用一些CSS技巧如下做到这一点：

DEMO

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; 
}

来源

2015-05-26 05:55:19

太棒了！非常感谢！ – Vic

随时！ Happy Coding .. :) –

这是一个非常好的纯CSS解决方案，它从其他引用的帖子中摆脱了JS＆CSS混乱的垃圾。 – wndxlori

$('#table')表示您的查找元素编号为table。

$('.table')意味着你的寻找元素按类table。

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

对于您的情况，您的表的编号为table，因此您可以使用$('#table')选择该表。

而且您没有任何使用类table的html元素，因此当您选择使用$('.table')时，您将不会收到任何内容。

来源

2015-05-26 03:46:21

感谢您指出我没有'table'类。我意识到我把'table'放在'data-class'里面。我遵循你的建议，并通过它的ID引用表，但我得到了这个： http://jsfiddle.net/mademoiselletse/bypbqboe/62/ 我的代码是否有冲突？ – Vic

修复引导表的第一列

回答

相关问题