具有固定列的响应表

Question

我在 7 个月前曾发布过关于此问题的帖子，有人很友好地为我指出了正确的解决方案： bootstrap 3 responsive table with fixed first column

但是，这突然停止工作，固定列不再固定。 要查看它的实际效果，请访问：http://nasgame.apphb.com （示例数据：搜索 Matt Vincent 并选择 Pro）

第一列现在随着其余内容滚动。

这是操作代码：

jquery

$(function(){
var $table = $('.table');
//Make a clone of our table
var $fixedColumn = $table.clone().insertBefore($table).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($table.find('tr:eq(' + i + ')').height());
});
});

css

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

Answer 1

在我看来它可以正常工作，但是由于某些克隆的表格单元格具有透明背景，您可以看到它们后面的表格：

在我的屏幕截图中，您可以看到奇数行看起来不错，因为单元格的背景是灰色的。

您也可以通过给偶数单元格添加背景来解决此问题。

我认为这可能会做到：

.table-striped > tbody > tr:nth-child(even) > td {
    background-color: #fff;
}

或者，正如 3rror404 在评论中建议的那样，在整个表上设置一个background-color：

.table-striped > tbody {
    background-color: #fff;
}

Answer 2

具有固定列的响应式表格，无需使用任何 jQuery 或 javascript。

• HTML

  <div class="table">
    <div class="table-scroll">
      <table class="table-main">
          <thead>
              <tr>
                  <th class="fix-col">Name</th>
                  <th>Designation</th>
                  <th>Experience</th>
                  <th>Technology</th>
                  <th>Company</th>
                  <th>Location</th>
                  <th>Contact No.</th>
                  <th>Address</th>
  
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td class="fix-col">Bob</td>
                  <td>Front End Developer</td>
                  <td>5 yrs</td>
                  <td>HTML,CSS</td>
                  <td>Google</td>
                  <td>California</td>
                  <td>9876543210</td>
                  <td>Google Office</td>
              </tr>
              <tr>
                  <td class="fix-col">Bob</td>
                  <td>Front End Developer</td>
                  <td>5 yrs</td>
                  <td>HTML,CSS</td>
                  <td>Google</td>
                  <td>California</td>
                  <td>9876543210</td>
                  <td>Google Office</td>
              </tr>
              <tr>
                  <td class="fix-col">Bob</td>
                  <td>Front End Developer</td>
                  <td>5 yrs</td>
                  <td>HTML,CSS</td>
                  <td>Google</td>
                  <td>California</td>
                  <td>9876543210</td>
                  <td>Google Office</td>
              </tr>
              <tr>
                  <td class="fix-col">Bob</td>
                  <td>Front End Developer</td>
                  <td>5 yrs</td>
                  <td>HTML,CSS</td>
                  <td>Google</td>
                  <td>California</td>
                  <td>9876543210</td>
                  <td>Google Office</td>
              </tr>
              <tr>
                  <td class="fix-col">Bob</td>
                  <td>Front End Developer</td>
                  <td>5 yrs</td>
                  <td>HTML,CSS</td>
                  <td>Google</td>
                  <td>California</td>
                  <td>9876543210</td>
                  <td>Google Office</td>
              </tr>
          </tbody>
      </table>
  </div>
  

• CSS

  .table-main {
      border: none;
      border-right: solid 1px rgb(75, 90, 102);
      border-collapse: separate;
      border-spacing: 0;
      font: normal 13px Arial, sans-serif;
  }
  
  .table-main thead th {
      background-color: rgb(203, 220, 233);
      border: none;
      color: #336B6B;
      padding: 10px;
      text-align: left;
      text-shadow: 1px 1px 1px #fff;
      white-space: nowrap;
  }
  
  .table-main tbody td {
      border-bottom: solid 1px rgb(75, 90, 102);
      color: #333;
      padding: 10px;
      text-shadow: 1px 1px 1px #fff;
      white-space: nowrap;
  }
  
  .table {
      position: relative;
  }
  
  .table-scroll {
      margin-left: 131px;
      overflow-x: scroll;
      overflow-y: visible;
      padding-bottom: 5px;
      width: 500px;
  }
  
  .table-main .fix-col {
      border-left: solid 1px rgb(75, 90, 102);
      border-right: solid 1px rgb(75, 90, 102);
      left: 0;
      position: absolute;
      top: auto;
      width: 110px;
  }
  

这是 JSFiddle 链接：https://jsfiddle.net/mahendra_ahada/vqkxcn3s/1/

Answer 3

.table-responsive>.fixed-column {
  position: fixed;
}

这个改变有更好的结果，但还不是很正确。