您的位置：首页 > Web前端 > JQuery

jquery:Fix Table Header

2011-03-31 00:37 260 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <mce:style type="text/css"><!--
        .tabWordBreak{table-layout:fixed;word-wrap:break-word; word-break:break-all;}
    
--></mce:style><style type="text/css" mce_bogus="1">        .tabWordBreak{table-layout:fixed;word-wrap:break-word; word-break:break-all;}
    </style>
    <mce:script src="js/jquery-1.4.1.min.js" mce_src="js/jquery-1.4.1.min.js" type="text/javascript"></mce:script>
    <mce:script src="js/jquery-1.4.1.min-vsdoc.js" mce_src="js/jquery-1.4.1.min-vsdoc.js" type="text/javascript"></mce:script>
    <mce:script type="text/javascript"><!--
        function fixTableHeader(gv, scrollHeight) {
            gv = "#" + gv;
            var gvn = $(gv).clone(true).removeAttr("id");
            $(gvn).find("tbody").remove();
            $(gv).before(gvn);
            $(gv).find("thead").remove();
            $(gv).wrap("<div style='height:" + scrollHeight + "px; overflow-y: scroll;overflow-x:hidden; overflow: auto; padding: 0;margin: 0;'></div>");
        }
        function setColWidth(thead1, tbody1, colWidthArr, normalScrWidth, adjustColIdxArr,allowMinWidth) {
            if (typeof (normalScrWidth) != "undefined") {
                var able = true;
                var adjustVal = parseInt((window.screen.width - normalScrWidth) / adjustColIdxArr.length);
                for (var k = 0; k < adjustColIdxArr.length; k++) {
                    if (colWidthArr[adjustColIdxArr[k]] + adjustVal < allowMinWidth) {
                        able = false;
                        break;
                    }
                }
                if (able) {
                    for (var k = 0; k < adjustColIdxArr.length; k++) {
                        colWidthArr[adjustColIdxArr[k]] +=adjustVal;
                    } 
                }
            }
            for (var i = 0; i < colWidthArr.length; i++) {
                $("#" + thead1 + " tr>th:eq(" + i + ")").css("width", colWidthArr[i]);
                $("#" + tbody1 + " tr>td:nth-child(" + (i+1) + ")").css("width", colWidthArr[i]);
            }
        }
        $(function() {
            fixTableHeader("table1", 150);
            //setColWidth("thead1", "tbody1", [200, 300, 400]);
            setColWidth("thead1", "tbody1", [200, 300, 400], 1280, [1, 2],100);
            //setColWidth("thead1", "tbody1", [100, 200, 300]);
        });
    
// --></mce:script>
</head>
<body>
    <div id="divOutside">
        <table id="table1" border="1" width="100%" class="tabWordBreak">
            <thead id="thead1">
                <tr><th>head0</th><th>head1</th><th>head2</th><th>head3</th></tr>
            </thead>
            <tbody id="tbody1">
                <tr><td>head0</td><td>head1</td><td>do you know this word is long so much</td><td>abcdef sfadiweljfdsi sdfweew sfdaaaaaasafdfasddfasfsadfsdafasdsafdfsdafsdaf</td></tr>
                <tr><td>head0</td><td>head1</td><td>head2</td><td></td></tr>
                <tr><td>head0</td><td>head1</td><td>head2</td><td>head3</td></tr>
                <tr><td>head0</td><td>head1</td><td>head2</td><td>head3</td></tr>
                <tr><td>head0</td><td>head1</td><td>head2</td><td>head3</td></tr>
                <tr><td>head0</td><td>head1</td><td>head2</td><td>head3</td></tr>
                <tr><td>head0</td><td>head1</td><td>head2</td><td>head3</td></tr>
                <tr><td>head0</td><td>head1</td><td>head2</td><td>head3</td></tr>
                <tr><td>head0</td><td>head1</td><td>head2</td><td>head3</td></tr>
                <tr><td>head0</td><td>head1</td><td>head2</td><td>head3</td></tr>
                <tr><td>head0</td><td>head1</td><td>head2</td><td>head3</td></tr>
                <tr><td>head0</td><td>head1</td><td>head2</td><td>head3</td></tr>
                <tr><td>head0</td><td>head1</td><td>head2</td><td>head3</td></tr>
                <tr><td>head0</td><td>head1</td><td>head2</td><td>head3</td></tr>
            </tbody>
        </table>
    </div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航