修复引导表的第一列

小编典典

修复引导表的第一列

css

按照@koala_dev的代码尝试锁定表水平滚动的第一列。不幸的是，代码对我的表没有影响。我想知道是否有人可以给我一些有关我是编程新手的所作所为的提示。

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

我偏离的唯一一件事是，我将其定义$('.table')为，$tableClass而不是$table因为我之前已将其定义var $table为$('#table')。您的帮助将不胜感激！

阅读 267

2020-05-16

共1个答案

小编典典

好的，删除所有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;
}

2020-05-16