Question

我正在尝试创建具有固定列标题的100％宽度的垂直滚动HTML表。我已经看到了许多有关此问题的答案，并在此处找到了出色的帖子：HTML table with 100% width, with vertical scroll inside tbody。

我试图更好地理解其中的一种解决方案。将jQuery用于自动宽度列的代码：

// Change the selector if needed
var $table = $('table.scroll'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });    
}).resize(); // Trigger resize handler

http://jsfiddle.net/hashem/CrSpu/555/

我试图确切地了解它在做什么，并且还试图在同一个小提琴中不使用jQuery来重新编写它，但是它不是很有效。似乎从一开始就初始化了三个变量。然后在每次调整窗口大小时，它获取tbody中每个单元格的当前列宽。然后，将thead中每个单元的宽度设置为与主体相同的宽度。那正确吗？这是我尝试在不使用jQuery的情况下编写的代码：

 // Change the selector if needed
 var table = document.getElementById('myTable');
 var bodyCells = Array.from(table.querySelectorAll('tbody tr:first-child td'));
 var colWidth;

 // Adjust the width of thead cells when window resizes
 window.addEventListener('resize', function() {
   // Get the tbody columns width array
   colWidth = bodyCells.map(cell => cell.getBoundingClientRect().width);

   // Set the width of thead columns
   table.querySelectorAll('thead tr th').forEach(function(i, v) {
     i.width = colWidth[v] + 'px';
   });
 });

http://jsfiddle.net/CrSpu/30915/

最后导致行不通的是列标题宽度与主体单元格的宽度不匹配。知道我要去哪里错了吗？

如何编写Javascript以自动调整固定标题垂直滚动表的列宽

0 个答案: