javascript - 水平滚动时如何修复表格的某些列

Question

我做了一个13列的表格，所以不能一屏显示。也就是说，我需要水平滚动表格以浏览表格中的所有数据。

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

我找到了一个解决方案，它给出了 style{position:absolute; left:0} 到所有的 th 和 tr，对我不起作用。

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

我的html代码

    <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>`

我的javascript代码

         var my_tbody = document.getElementById('my-tbody');





                    for(var i=0; i<data.length; i++){
                          var row = my_tbody.insertRow( my_tbody.rows.length ); 

                          var col1 = row.insertCell(0);
                          col1.innerHTML = data[i].section1;

                          var col2 = row.insertCell(1);
                          col2.innerHTML = data[i].section2;

                          var col3 = row.insertCell(2);
                          col3.innerHTML = data[i].product;

                          var col4 = row.insertCell(3);
                          col4.innerHTML = data[i].product_description;

                          var col5 = row.insertCell(4);
                          col5.innerHTML = data[i].status;

                          var col6 = row.insertCell(5);
                          col6.innerHTML = data[i].rate;

                          var col7 = row.insertCell(6);
                          col7.innerHTML = data[i].start_date;

                          var col8 = row.insertCell(7);
                          col8.innerHTML = data[i].completion_date;

                          var col9 = row.insertCell(8);
                          col9.innerHTML = data[i].proceed_detail;

                          var col10 = row.insertCell(9);
                          col10.innerHTML = data[i].schedule_detail;

                          var col11 = row.insertCell(10);
                          col11.innerHTML = data[i].issues;

                          var col12 = row.insertCell(11);
                          col12.innerHTML = data[i].in_charge;

                          var col13 = row.insertCell(12);
                          col13.innerHTML = data[i].se;
                    }

            }

如您所见，我的表格没有标签。所以，行数总是在变化

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

此时您的第一张 table 位于第二张 table 上方。然后使用一些 jquery，您可以计算第一个表格的宽度并将此值作为左边距添加到第二个表格:

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

它看起来像这样: FIDDLE