修复引导表的第一列

Question

我按照@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')。非常感谢您的帮助！

Answer 1

只需将position:sticky 添加到th & td first-child。

th:first-child, td:first-child
{
  position:sticky;
  left:0px;
  background-color:grey;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
  <tr>
    <th>TIME</th>
    <th>Company</th>
    <th>Company</th>
    <th>Company</th>
    <th>Company</th>
    <th>Company</th>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>11:40   </td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td> 
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>11:40   </td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>11:40   </td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
   <td>11:40   </td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>11:40   </td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>11:40   </td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

Answer 2

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

Answer 3

以下样式将创建一个固定第一列的剥离表：

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

Answer 4

$('#table') 表示您通过 id table 查找元素。

$('.table') 表示您按类查找元素table。

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

在您的情况下，您的表的 ID 为 table，因此您可以使用 $('#table') 选择该表。

而且您没有任何使用table 类的html 元素，因此当您选择使用$('.table') 时，您将一无所获。