修复引导表的第一列

Posted 2023-05-08

【中文标题】修复引导表的第一列

【英文标题】：Fix First Column of a Bootstrap Table

【发布时间】：2015-08-07 13:36:23

【问题描述】：

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

【问题讨论】：

在您的演示中有这一行 var $tableClass = $('.table'); 即您正在尝试获取您的表对象，但您已将 table 与 id 指定为 table 而不是className 为 table

感谢您的指出！我用 ID 引用了表格，但我得到了这个：jsfiddle.net/mademoiselletse/bypbqboe/62 你能给我一些暗示为什么会这样吗？

你的代码很混乱！！你为什么要克隆table，为什么要删除除第一个之外的所有table data 和table head？？

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

是的，我明白了！但是你可以用css 来做，对吗？为什么cloning 并再次插入等等？？

【参考方案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>

【讨论】：

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

【参考方案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;

【讨论】：

太棒了！非常感谢！

这是一个出色的纯 CSS 解决方案，它击败了其他参考帖子中的 JS 和 CSS 混乱。 ??

@ShekharPankaj。抱歉，但我看到它还在工作。你能告诉我什么不工作吗...？

（不能格式化，反引号是换行符）只有以下部分对我来说足够好（使用引导表插件）：``/* making sure all rows are padded ahead of the fixed column*/.table > thead > tr > th padding-left: 40px !important;``@987654328 @.table > tbody > tr > td:first-child position: absolute;width: 40px;``

演示似乎不适合我；假设 getData 按钮应该填充表格？

【参考方案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;

【参考方案4】：

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

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

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

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

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

【讨论】：

感谢您指出我没有 table 课程。我意识到我把table 放在data-class 里面。我听从了您的建议并通过其 ID 引用了该表，但我得到了这个：jsfiddle.net/mademoiselletse/bypbqboe/62 我的代码是否冲突？