html中表格table冻结行和列

最新推荐文章于 2022-05-18 18:45:00 发布

leixiaohuo

最新推荐文章于 2022-05-18 18:45:00 发布

阅读量7.2k

点赞数 1

分类专栏： html 文章标签： html table 冻结表格冻结 table冻结行和列冻结表头

本文链接：https://blog.csdn.net/leixiaohuo/article/details/84605175

版权

本文介绍了两种在HTML表格中实现冻结行和列的方法，包括详细步骤和参考资料来源，帮助读者理解和应用表格冻结技术。

摘要由CSDN通过智能技术生成

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>完美冻结列和行 </title>
    <style type="text/css">
        .FixedHeaderColumnsTableDiv
        {
            overflow: auto;
            position: relative;
        }
        .FixedCell
        {
            position: relative;
            top: expression(this.offsetParent.scrollTop);
            left: expression(this.parentElement.offsetParent.scrollLeft);
            z-index: 1800;
        }
        .FixedHeaderRow1
        {
            position: relative;
            top: expression(this.offsetParent.scrollTop);
            background-color: #ccc;
            z-index: 300;
        }
        .FixedHeaderRow2
        {
            position: relative;
            top: expression(this.offsetParent.scrollTop);
            z-index: 290;
            background-color:#ffccff;
        }
        .FixedDataColumn
        {
            position: relative;
            left: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
            z-index: 200;
            background-color: Aqua;
        }
    </style>
</head>
<body>
    <div class="FixedHeaderColumnsTableDiv" style="width: 1000px; height: 100px">
        <table border="0" cellpadding="0" cellspacing="0" width="1200px">
            <tr class="FixedHeaderRow1">
                <td class="FixedCell" style="width: 80px">
                    header1
                </td>
                <td class="FixedCell" style="width: 80px">
                    header2
                </td>
                <td class="FixedCell" style="width: 80px">
                    header3
                </td>
                <td class="FixedCell" style="width: 80px">
                    header4
                </td>
                <td style="width: 80px">
                    header5
                </td>
                <td style="width: 80px">
                    header6
                </td>
                <td style="width: 80px">
                    header7
                </td>
                <td style="width: 80px">
                    header8
                </td>
                <td style="width: 80px">
                    header9
                </td>
                <td style="width: 80px">
                    header10
                </td>
            </tr>
            <tr class="FixedHeaderRow2">
                <td class="FixedCell" style="width: 80px" align="center">
                    ss
                </td>
                <td class="FixedCell" style="width: 80px" align="center">
                    ss
                </td>
                <td class="FixedCell" style="width: 80px">
                    header16
                </td>
                <td class="FixedHeaderColumn1" colspan="7" align="center">
                    header17dddddddddddd
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class="FixedDataColumn">
                    col3
                </td>
                <td class="FixedDataColumn">
                    col4
                </td>
                <td>
                    col5
                </td>
                <td>
                    col6
                </td>
                <td>
                    col7
                </td>
                <td>
                    col8
                </td>
                <td>
                    col9
                </td>
                <td>
                    col10
                </td>
            </tr>
            <tr>
                <td class="FixedDataColumn">
                    col1
                </td>
                <td class="FixedDataColumn">
                    col2
                </td>
                <td class=&

最低0.47元/天解锁文章

leixiaohuo

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
4
评论
html中表格table冻结行和列

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt;title&gt;完美冻结列和行 &lt;/title&gt; &lt;style type="text/css"&gt; .FixedHeaderColumnsTableDiv {
复制链接

扫一扫

专栏目录