修复Bootstrap表格的第一列

Question

我尝试着按照@koala_dev在这篇文章中的代码去锁定我的表格的第一列，并使其在水平滚动时保持固定。但是代码对我的表格没有任何影响。由于我是新手，请问是否有人能指点一下我做错了什么。

这是我的表格： 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;
    }
}

我仅仅改变了这个演示代码里的一件事情，就是我把$('.table')定义为$tableClass而不是$table，因为我之前已经定义了var $table为$('#table')。非常感谢您的帮助！

- Vic

---

你的代码非常令人困惑！为什么要克隆“table”，并且除了第一个之外，为什么要删除所有的“table data”和“table head”？ - Guruprasad J Rao

因为我想在表格向右滚动时锁定第一列，由于我有很多列，就像这个人所做的那样：http://jsfiddle.net/4XG7T/3/ - Vic

是的，我明白了！但你不只是可以用 css 来做吗？为什么要 克隆 然后再插入等等呢？ - Guruprasad J Rao

我现在明白你的意思了。有没有一种方法可以在不克隆表格的情况下实现相同的效果？我尝试通过在CSS中插入以下内容将前两列的位置设置为“absolute”，但并没有成功： #table th:nth-child(1), #table td:nth-child(1), #table th:nth-child(2), #table td:nth-child(2){ position: absolute } - Vic

实际上，问题在于 boostraptable 插件会在表格之前添加一些额外的 divs 以使其具有响应性，并且您需要尝试将其附加到确切的位置！也就是说，您所看到的示例使用新创建的 table 隐藏了第一个标题和列，这非常难以实现！不管怎样！我会尝试一次！ - Guruprasad J Rao

Answer 1

只需将position:sticky添加到&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>

- suhailvs

---

很好的问题。但是如果表格有table-bordered类，如何修复左边框，以便滚动时显示边框像素后面的文本。参考：https://jsfiddle.net/mpsbhat/hq9f4Lws/ - mpsbhat

Answer 2

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

- Guruprasad J Rao

---

太棒了！非常感谢！ - Vic

这是一个非常出色的纯CSS解决方案，胜过了其他参考帖子中混乱的JS和CSS。 - wndxlori

@ShekharPankaj。抱歉，但我仍然看到它在工作... 你能告诉我哪里出了问题吗...？ - Guruprasad J Rao

只有以下部分对我来说足够好（使用bootstrap-table插件）：/* 确保所有行在固定列之前都有填充 */ .table > thead > tr > th { padding-left: 40px !important; }/* 使用绝对定位修复列 */ .table > tbody > tr > td:first-child { position: absolute; width: 40px; } - gawkface

@JeffAxelrod 我认为数据源返回了404错误。你可能需要对其进行不同的数据测试。但是相信我，这个解决方案是可行的。 :) - Guruprasad J Rao

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

- Jithin Pavithran

Answer 4

$('#table') 意味着你通过id table 查找元素。

$('.table') 意味着你通过class table 查找元素。

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

在你的情况下，你的表格具有id table，因此你可以使用 $('#table') 选择该表格。

而且你没有使用 class table 的任何html元素，所以当你使用 $('.table') 进行选择时将什么也不会得到。

- Dilip Kumar

---

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