是否有跨浏览器的CSS/JavaScript技术来显示长HTML表格,使列标题保持固定在屏幕上,不要与表格主体一起滚动.想想Microsoft Excel中的"冻结窗格"效果.
我希望能够滚动表格的内容,但始终能够看到顶部的列标题.
我正在尝试使用bootstrap 3表创建一个具有固定标头和可滚动内容的表.不幸的是,我发现的解决方案不适用于bootstrap或搞乱风格.
这里有一个简单的bootstrap表,但由于某些原因我不知道tbody的高度不是10px.
height: 10px !important; overflow: scroll;
例:
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody style="height: 10px !important; overflow: scroll; ">
<tr>
<td class="filterable-cell">111 Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
</table>我希望能够"调整"HTML表格的演示文稿以添加单个功能:当向下滚动页面以使表格在屏幕上但标题行在屏幕外时,我希望标题保持不变在观察区域的顶部可见.
这在概念上类似于Excel中的"冻结窗格"功能.但是,HTML页面中可能包含多个表,我只希望它发生在当前处于视图中的表中,只有在它处于视图中时才会发生.
注意:我已经看到一种解决方案,其中表数据区域可滚动而标题不滚动.这不是我正在寻找的解决方案.
Bootstrap布局fixed-navbar.桌子上有很多行.
问题？当我滚动页面导航栏将在那里,因为它是固定的.当我滚动更多我希望表头在导航栏下修复,表(table-body)的内容滚动没有滚动条!
像这样的东西 - Codepen
**小提琴**引导表
HTML
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something …我正在使用一个数据表,我正在使用传统的表格标记,但我想要的是我的表从页面的某个地方开始,我希望我的表格标题在它开始的地方固定,并且表格主体应该通过删除其余页面来滚动高度
我在这里显示一个小例子
https://codepen.io/avreddy/pen/eyYBdB?editors=1100
.datatable{
width: 50%;
border-collapse: collapse;
}
td{
text-align: center;
border: 1px solid;
padding:5px;
}<body>
<div class="somecontent">
<h4>Some Content</h4><h4>Some Content</h4><h4>Some Content</h4>
</div>
<table class="datatable">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td> …我有一个带有标题和正文的表格,我希望表格标题在主体上滚动时保持固定.
该表设置如下:
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
...more rows for data...
</tbody>
该表用一个封装,并具有CSS,如:
overflow-x: hidden;
overflow-y: auto;
height: 400px;
我需要表头保持完全静止,但当我添加position:fixed; 对于thead或个人而言,标题会被压扁.
这是最好的方法吗？
我有以下样式和HTML,但是当它显示时,表格显示为已损坏(所有表格行和单元格都已损坏).我不确定为什么; 我该怎么解决？
tbody需要这个尺寸: height: calc(100vh - 130px);
红线定义表的大小.
编辑:我tbody需要滚动,thead需要修复.
jsfiddle:https://jsfiddle.net/zuxq2gr0/11/
.col-lg-12 {
border: 1px solid red;
}
tbody {
display: block;
overflow-y: scroll;
height: calc(100vh - 130px);
}
tbody > tr {
display: table;
width: 100%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-lg-8 ">
<div class="col-lg-12">
<table class="table table-striped" aurelia-table="">
<thead>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>test</td>
<td>test</td>
<td>test</td>
<td>
<div class="form-group">
<select id="selectbasic" name="selectbasic" class="form-control …