水平滾動時如何修復表格的某些列

Question

我製作了一個十三列表格，所以它不能在一個屏幕上顯示。 也就是說，我需要水平滾動表格以瀏覽表格中的所有數據。

我想要做的是，即使將其滾動到右側，前4列也應該固定。

我找到了一個解決方案，它給出了樣式{position：absolute;左：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個不同的表。一列有你不想移動的列，另一列有其他列。

有了這個網站：

<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