table-header-groupはスクロールに対応していません

Question

この例では、tbody属性に "display as block"という結果を与えるときが想定されています。しかし、 "table-header-groupとしての表示"として与えられたとき、テーブル行（tr）の幅をそれぞれのthに設定することはできません。私を助けてください。

スニペット：

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(); 
 
    alert("width:" + colWidth); 
 
    // Set the width of thead columns 
 
    $table.find('thead tr').children().each(function(i, v) { 
 
    $(v).width(colWidth[i]); 
 
    }); 
 
}).resize(); // Trigger resize handler

table.scroll { 
 
    width: 100%; 
 
    /* Optional */ 
 
    /* border-collapse: collapse; */ 
 
    border-spacing: 0; 
 
    border: 2px solid black; 
 
} 
 
table.scroll tbody { 
 
    display: block; 
 
} 
 
table.scroll thead { 
 
    display: table-header-group; 
 
} 
 
thead tr th { 
 
    height: 30px; 
 
    line-height: 30px; 
 
    /*text-align: left;*/ 
 
} 
 
table.scroll tbody { 
 
    height: 100px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 
tbody { 
 
    border-top: 2px solid black; 
 
} 
 
tbody td, 
 
thead th { 
 
    // width: 20%; /* Optional */ border-right: 1px solid black; 
 
} 
 
tbody td:last-child, 
 
thead th:last-child { 
 
    border-right: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table class="scroll"> 
 
    <thead> 
 
    <tr> 
 
     <th>Head 1</th> 
 
     <th>Head 2</th> 
 
     <th>Head 3</th> 
 
     <th>Head 4</th> 
 
     <th>Head 5</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Lorem ipsum dolor sit amet.</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Content 1</td> 
 
     <td>Content 2</td> 
 
     <td>Content 3</td> 
 
     <td>Content 4</td> 
 
     <td>Content 5</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

Ajaxのデータテーブルには、あなたのための最善の解決策になります。ここであなたが達成したいと思うリンクがあります。 Data table exampleおよびScrolling example。 2番目のリンクでスクロールする例を見つける

$(document).ready(function() { 
    $('#example').DataTable({ 
     scrollY:  '50vh', 
     scrollCollapse: true, 
     paging:   false 
    }); 
}); 

また、必要に応じてピクセルを使用してスクロール機能を設定することもできます。このプラグを使用すると、テーブルを操作する必要はありません。それはテーブルを再配置します。