[英]How to make single row Non scrollable in HTML
我想创建一个可滚动的表,但我需要冻结滚动表的第一行。 我怎么能做到这一点。 期待来自CSS或JS或Jquery的任何想法
您的需求是一个非常常见的用例,非常可惜的是,在任何浏览器中都没有原生的方法来实现它。 使用CSS,JS,组合有很多解决方法,每种解决方案都有其特定的优点和不便之处(最常见的一种解决方案是固定列宽)。
您当然可以自己实现它(在Web上浏览,为此您应该有很多教程)。 或者,您可以依靠一个避免常见陷阱并且是大多数跨浏览器的库。
您可能会对jQuery的DataTables插件特别是其FixedHeader扩展感兴趣 。
例。 的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
采用了棱角分明您可以使用FixedHeader模块像这样的ngmodules发现http://ngmodules.org/modules/FixedHeader 。 或使用jquery插入http://markmalek.github.io/Fixed-Header-Table/
还要使用CSS位置签出:粘性http://charliepark.org/css-only-sticky-headers/
这称为表固定标题滚动。 您可以使用此jquery插件,实现起来非常简单fixedheadertable插件
使用插件fixedheadertable , Datatable参考链接Stack over Flow
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.