是否有跨浏览器的CSS/JavaScript技术来显示长HTML表格,使列标题保持固定在屏幕上,不要与表格主体一起滚动.想想Microsoft Excel中的"冻结窗格"效果.
我希望能够滚动表格的内容,但始终能够看到顶部的列标题.
我正在写一个页面,我需要一个html表来维持一个设置的大小.我需要表格顶部的标题始终保持在那里,但无论表格中添加了多少行,我还需要滚动表格的主体.
我希望它看起来像这个网址中的方法2:http://www.cssplay.co.uk/menu/tablescroll.html
我试过这样做但没有滚动条出现:
<table border=1 id="qandatbl" align="center">
<tr>
<th class="col1">Question No</th>
<th class="col2">Option Type</th>
<th class="col1">Duration</th>
</tr>
<tbody>
<tr>
<td class='qid'></td>
<td class="options"></td>
<td class="duration"></td>
</tr>
</tbody>
</table>
CSS:
tbody {
height:80em;
overflow:scroll;
}
我想使我的表的标题得到修复.表格存在于可滚动的div中.请在此处查看我的代码:http: //jsfiddle.net/w7Mm8/114/请建议我解决此问题.
谢谢
我的代码:
<div style="position: absolute; height: 200px; overflow: auto; ">
<div style="height: 250px;">
<table border="1">
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
</table>
</div>
</div>我有一个解决方案,我可以通过使用次要的jQuery和CSS创建可固定页眉/页脚的可滚动表 - 但我正在寻找一种方法,使这个跨CSS浏览器兼容的CSS解决方案.
需要明确的是,我所寻求要做的就是使用只有一个table标签(和它是有效的子标签,colgroup,col,thead,tbody,tfoot,tr,th,td),而是采用了一套将符合下列条件的CSS规则:
这个代码示例:http://jsfiddle.net/TroyAlford/SNKfd/显示了我当前的方法.大多数JS只是用随机值填充表,但最后一部分是驱动左/右可滚动性的因素.
$tbody.bind('scroll', function(ev) {
var $css = { 'left': -ev.target.scrollLeft };
$thead.css($css);
$tfoot.css($css);
});
注意:提供的示例在IE中无法正确呈现,并且需要jQuery来提供水平滚动.无论如何我不关心水平滚动,所以如果解决方案不这样做就没问题.
在我的项目中,我试图tbody在IE8中制作滚动.我知道它可以通过只给被滚动overflow: auto到tbody.但这在IE8中不起作用.为了使其在IE8工作,tbody必须给予position: absolute(或float: left双方thead和tbody).如果我做的overflow: auto工作,那么我分配到的宽度th和td百分比被忽略.这又不让tr占据全宽thead和tbody.因此,tr和tbody/ 之间存在刺激的空间thead.
请在IE8中测试此演示.(在firefox和chrome中工作正常)
这是小提琴中的代码.
以下是我无法改变的严格要点
td且th必须为百分比.实际上,我确实用一个脏修复来解决它,如下所示
th:after,td:after{ /* only to the last column, first occurence */
content: "...................................................";
visibility: hidden;
}
也可以通过在开发人员工具中为特定的td/th提供许多点来检查上述代码
上面的代码看起来不错,但我需要将:after伪选择器仅提供给第一行的最后一列th和tr.如果我给每一个 …
我有一个需要垂直滚动的数据表.似乎如果您的显示值是表格,则无法设置高度或最大高度,因此overflow-y:scroll不执行任何操作.(Codepen与表)
.fake-table {
display: table;
max-height: 300px;
overflow-y: scroll;
}
另外,如果从父级删除display:table但保留display:table-row和table-cell,则行的宽度不会是100%;
我尝试用flexbox(带有flexbox的Codepen)来做这件事.但是,当然,我没有很好的列左对齐.
.fake-table > * {
display: flex;
justify-content: space-around;
}
浏览器支持是所有现代浏览器(IE10 +),包括移动safari和Android浏览器.