我想创建一个可滚动的表,但我需要从滚动中冻结表的第一行。我怎么能实现这一点。期待来自CSS或JS或Jquery的任何想法
答案 0 :(得分:1)
您的要求是一个非常常见的用例,很遗憾,在任何浏览器中都没有本机方式来实现它。你有很多使用CSS,JS,组合的解决方法,每个解决方案都有特定的优点和不便(主要最常见的是需要修复列宽)。
你当然可以自己实现它(在网上浏览,你应该有很多教程)。或者你可以依靠一个避免常见陷阱的库,并且是大多数跨浏览器。
你可能会对jQuery的DataTables插件感兴趣,特别是它的FixedHeader扩展名。
答案 1 :(得分:0)
例子。 的 HTML 强>
<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> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td>5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td>4</td>
<td> 5</td>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
<td> 3</td>
<td> 4</td>
<td> 5</td>
</tr>
</tbody>
</table>
<强> CSS 强>
table.scroll {
/* width: 100%; */ /* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead { display: block; }
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;
/* white-space: nowrap; */
}
tbody td:last-child, thead th:last-child {
border-right: none;
}
<强> JS 强>
// 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
答案 2 :(得分:0)
使用Angular,您可以使用在ngmodules this上找到的http://ngmodules.org/modules/FixedHeader之类的FixedHeader模块。或使用jquery插入http://markmalek.github.io/Fixed-Header-Table/
还可以使用css位置检查:粘贴http://charliepark.org/css-only-sticky-headers/
答案 3 :(得分:0)
这称为表格固定页眉滚动。你可以使用这个jquery插件,它实现起来非常简单 fixedheadertable plugin
答案 4 :(得分:0)
使用插件fixedheadertable,Datatable 请参阅链接Stack over Flow