经理给我个任务要写个表格用jq,
当然了虽然我是实习生,但是表格什么的还是so easy,
可是呢,问题这是个特殊的表格,
要求,表头垂直不动,但是可以水平移动,我试了好几种方法不如意啊,
宝宝心里苦啊,哪位前端大神救我出苦海/(ㄒoㄒ)/~~
没多少c币,尽量给了
这个链接就是大概要实现的效果
http://miniui.com/demo/#src=datagrid/celledit.html
你的那个链接,右侧,左边选项卡demo是效果图,右边选项卡code就是代码了,你点过去看看就行了
miniui要钱的,用easyui的datagrid就行了,开源的,和miniui差不多
http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=
用某种前端框架或者IFrame
看到你的问题以后用十几分钟写了一个简单的demo,基本达到你想要的要求
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
body {
text-align: center;
}
div {
width: 440px;
height: 100px;
overflow-y: scroll;
margin: 0 auto;
}
table {
border-spacing: 0;
}
td {
width: 90px;
height: 25px;
line-height: 25px;
text-align: center;
border-left: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="con">
<table>
<thead style="background-color:#ccc">
<tr>
<td>编号</td>
<td>手机</td>
<td>姓名</td>
<td>地址</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>10001</td>
<td>13511111111</td>
<td>赵四</td>
<td>中国北京</td>
<td>18</td>
</tr>
<tr>
<td>10002</td>
<td>13511111111</td>
<td>赵四</td>
<td>中国北京</td>
<td>18</td>
</tr>
<tr>
<td>10003</td>
<td>13511111111</td>
<td>赵四</td>
<td>中国北京</td>
<td>18</td>
</tr>
<tr>
<td>10004</td>
<td>13511111111</td>
<td>赵四</td>
<td>中国北京</td>
<td>18</td>
</tr>
<tr>
<td>10005</td>
<td>13511111111</td>
<td>赵四</td>
<td>中国北京</td>
<td>18</td>
</tr>
<tr>
<td>10006</td>
<td>13511111111</td>
<td>赵四</td>
<td>中国北京</td>
<td>18</td>
</tr>
<tr>
<td>10007</td>
<td>13511111111</td>
<td>赵四</td>
<td>中国北京</td>
<td>18</td>
</tr>
<tr>
<td>10008</td>
<td>13511111111</td>
<td>赵四</td>
<td>中国北京</td>
<td>18</td>
</tr>
</tbody>
</table>
</div>
<script src="Js/jquery-2.1.1.min.js"></script>
<script>
$(function () {
$('#con').scroll(function () {
if ($(this).scrollTop() > 0) {
$('#con table thead').css('position', 'absolute').css('width', '422px');
} else {
$('#con table thead').css('position', '');
}
});
});
</script>
</body>
http://www.bootcss.com/ 希望可以帮到你
bootstrap太庞大了呵呵
哎 你都发链接了 右边就有code 啊