前端简单的表格问题,/(ㄒoㄒ)/~~ 谁来救救我?

经理给我个任务要写个表格用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 啊