如何使HTML页面中表格的行标题固定,就像EXCEL中冻结窗格功能一样?(问题一解决马上给分)

我不大明白你的问题，但如果是把表格格式固定倒有的是办法，可以用CSS呀。
for example:
    <style>
       td{text-align:center;...}
       tr{height:30pt;...}
    </style>

Faint -_-!!
都不大用EXCEL :(
Like this:
a b c d
0 0 1 0
2 5 1 0
3 5 4 0
...
当数据量太大时,滚动条下拉,于是表格标题a b c d用户看不见,
因此不知道那各列数据对应列标题是什么.
EXCEL中有个功能叫冻结窗格,可以将a b c d行冻结,使得滚动条下拉后
a b c d行始终保持在第一行,这样用户对各数据所处列就清楚了.

试试这个呢，也许是你想要得效果。
<html>
    <body>
        <table>
            <tr>
                <td>aaa</td>
                <td>bbb</td>
                <td>ccc</td>
                <td>ddd</td>
                <td>eee</td>
            </tr>
        </table>
        <div style="width:200;height:100px;overflow:auto">
            <table>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
            </table>
        </div>
    </body>
</html>

的确是个好办法,谢了 ^o^
不过如果列宽不一样就有点麻烦,我自己加了个初始化脚本,优化一下.呵呵
<html>
    <body>
        <table id="table1" border="1">
            <tr>
                <td>a</td>
                <td>bbb</td>
                <td>ccccccc</td>
                <td>ddd</td>
                <td>ee</td>
            </tr>
        </table>
        <div style="width:250;height:100px;overflow:auto">
            <table id="table2" border=1>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
                <tr>
                    <td>111</td>
                    <td>222</td>
                    <td>333</td>
                    <td>444</td>
                    <td>555</td>
                </tr>
            </table>
        </div>
<Script>
function init(){
var tr1 = table1.firstChild.firstChild;
var tr2 = table2.firstChild.firstChild;
var cells1 = tr1.children;
var cells2 = tr2.children;
for(var i=0;i<cells1.length;i++){
var maxWidth = Math.max(cells1[i].offsetWidth,cells2[i].offsetWidth);
cells1[i].style.width = maxWidth;
cells2[i].style.width = maxWidth;
}
}
init();
</Script>
    </body>
</html>

xueming1979() 你的大作要再这里晾一会儿让更多人参观么.
不需要的话就解贴了
^_^

调试易

如何使HTML页面中表格的行标题固定,就像EXCEL中冻结窗格功能一样?(问题一解决马上给分)

解决方案 »