修复引导表的第一列 [英] Fix First Column of a Bootstrap Table

问题描述

我在此信息中跟踪了@ koala_dev的代码尝试锁定第一列我的表水平滚动。代码不幸地对我的表没有影响。我想知道是否有人可以给我一些指示我做错了，因为我是新的编程。

I followed @koala_dev's code in this post to try to lock the first column s my table scrolls horizontally. The code unfortunately has no effect on my table. I was wondering if anyone could give me some pointers on what I have done wrong as I am new to programming.

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

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

This is the code I inserted in JS (line 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行）：

This is the CSS properties (line 36-47) I have inserted:

.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 as $（'＃table'）。

The only thing I deviated from the demo code was that I defined $('.table') as $tableClass instead of $table since I have previously defined var $table as $('#table') . Your help will be much appreciated!

推荐答案

确定..删除您的所有 js 代码，您可以使用以下CSS技巧来实现此功能：

Ok.. Remove all your js code and you can do this with some CSS tricks as below:

DEMO

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

这篇关于修复引导表的第一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！