在开发项目中,需要将表格头部固定,而且表格大多数情况下是会水平滚动的。项目的css框架是bootstrap 3,故也可以叫做bootstrap table。
需要实现的是:表格头部固定,并且支持水平滚动
html code(source table):
Test
....
stylesheet code:
#fixed_table #fix_head{
background: #FFFFFF;
box-shadow: 0px 0px 5px #888888;
}
JS代码按效果不同有一些不同
效果一 是浏览器滚动条滚动,头部固定:
效果二 内容内部滚动,固定表格头部。js,html是基于效果一,Html,js,css 代码相对效果一有增加。
附生成 codepen.io中table thead和tbody 内容的php code:
$count = 30;
echo '
';for($i=0;$i
echo "
Test{$i}";}
echo '
';echo "content trs---------------\r\n";
$content_count = 30;
for($i = 0; $i < $content_count;$i++){
echo '
';for($j = 0;$j < $count;$j++){
echo "
content".($i+1)."";}
echo '
';}
如果当前电脑没有PHP运行环境,可以百度: php代码在线运行,点击进入搜索结果列表的一个,然后将php代码复制进代码输入框中,运行之后应该就可以看到生成的有tr td 内容的字符串。
参考文档: