Question

我做了一个十三列表，所以它不能在一个屏幕上显示。也就是说，我需要水平滚动表来探索表中的所有数据。

我想要做的是，即使向右侧滚动，前4列也应该固定。

我找到了一个给出风格的解决方案{position：absolute;左：0}到所有th和tr，不适合我。

因为数量不固定，我使用javascript代码添加行。

我的HTML代码

(scope binding {{}})

我的javascript代码

    <div class="div_table">         
      <table>

            <thead>
                 <th>title1</th>
                 <th>title2</th>
                 <th>title3</th>
                 <th>title4</th>
                 <th>title5</th>
                 <th>title6</th>
                 <th>title7</th>
                 <th>title8</th>
                 <th>title9</th>
                 <th>title10</th>
                 <th>title11</th>
                 <th>title12</th>
                 <th>title13</th>
             </thead>



             <tbody id="my-tbody"></tbody>


        </table>
    </div>`

正如您所看到的，我的桌子没有标签。因此，行数总是会改变

Answer 1

好吧，如果你制作2张不同的牌桌，你就可以做到。一个包含您不想移动的列，另一个包含其他列。

使用这个html：

<div class="container">
  <div class="first-table">
    <table>
      <tr>
        <td>First column </td>
        <td>second column </td>
        <td>third column</td>
        <td>fourth ccolumn</td>
      </tr>
      <tr>
        <td>First column </td>
        <td>second column </td>
        <td>third column</td>
        <td>fourth ccolumn</td>
      </tr>
      <tr>
        <td>First column </td>
        <td>second column </td>
        <td>third column</td>
        <td>fourth ccolumn</td>
      </tr>
    </table>
  </div>
  <div class="second-table">
    <table>
      <tr>
        <td>title1 as asd asd asdasda </td>
        <td>title1 as asd asd </td>
        <td>title1 as asd asd asd</td>
        <td>title1 as asd asd a</td>
        <td>title1 as asd asd asda</td>
        <td>title1 as asd asa</td>
        <td>title1 as asd asd asdas </td>
        <td>title1 as a</td>
        <td>title1 as asd asd asdas</td>
        <td>title1 as asd a</td>
        <td>title1 as asd asd</td>
        <td>title1 as asd a</td>
      </tr>
      <tr>
        <td>title1 as asd asd asdasda </td>
        <td>title1 as asd asd </td>
        <td>title1 as asd asd asd</td>
        <td>title1 as asd asd a</td>
        <td>title1 as asd asd asda</td>
        <td>title1 as asd asa</td>
        <td>title1 as asd asd asdas </td>
        <td>title1 as a</td>
        <td>title1 as asd asd asdas</td>
        <td>title1 as asd a</td>
        <td>title1 as asd asd</td>
        <td>title1 as asd a</td>
      </tr>
      <tr>
        <td>title1 as asd asd asdasda </td>
        <td>title1 as asd asd </td>
        <td>title1 as asd asd asd</td>
        <td>title1 as asd asd a</td>
        <td>title1 as asd asd asda</td>
        <td>title1 as asd asa</td>
        <td>title1 as asd asd asdas </td>
        <td>title1 as a</td>
        <td>title1 as asd asd asdas</td>
        <td>title1 as asd a</td>
        <td>title1 as asd asd</td>
        <td>title1 as asd a</td>
      </tr>
    </table>
  </div>
</div>

和css：

.container {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  width: 100%;
}

table {
  display: inline-block;
  background-color: #fff;
}

td {
  border: 1px solid #000;
  white-space: nowrap;
}

.first-table {
  position: absolute;
  left: 0;
}

.first-table tr td {
  background-color: pink;
}

.second-table {
  overflow: auto;
}

此时你在第二张桌子上方有第一张桌子。然后使用一些jquery，您可以计算第一个表的宽度，并将此值作为左边距添加到第二个表中：

$(document).ready(function() {
  var firsttablewidth = $('.first-table').outerWidth();
  $('.second-table table').css('margin-left', firsttablewidth - 2 + 'px');
});

它将如下所示： FIDDLE

如何在水平滚动时修复表的某些列

1 个答案: