关于margin-top 为负值的问题

ahking 2014-05-12 09:09:43
为了实现表头固定,建了两个层
外层放置表头,设置了overflow:hidden;表头设置的背景色
内层放置整个表体,设置overflow:auto
为了避免同时出现两个表头,内层设置了margin-top:-60px;
结果内层的表头没有被裁切,外层表头的背景成了透明的了
该问题该如何解决呢?

...全文
865 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
win7killer 2015-02-25
  • 打赏
  • 举报
回复
margin-top的负值加错地方了,应该加到第二个div里边的table身上,-24px;
ahking 2014-05-13
  • 打赏
  • 举报
回复

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>固定标题列、标题头table</title>
    <style>
        table {
            border-collapse: collapse;
            border-spacing: 0px;
            width: 100%;
            border: #000 solid 0px;
        }

            table td {
                border: 1px solid #000;
                height: 25px;
                text-align: center;
                border-left: 0px;
            }

            table th {
                background: #edd3d4;
                color: #a10333;
                border: #000 solid 1px;
                white-space: nowrap;
                height: 21px;
                border-top: 0px;
                border-left: 0px;
            }

        .t_left {
            width: 30%;
            height: auto;
            float: left;
            border-top: 1px solid #000;
            border-left: 1px solid #000;
        }

        /*t_r_content和cl_freeze高度相差20px, 高度为外观显示高度,可根据情况调整*/
        .t_r_content {
            width: 100%;
            height: 220px;
            /*background: #fff;*/
            overflow: auto;
            margin-top: -10px;
        }

        .cl_freeze {
            height: 200px;
            overflow: hidden;
            width: 100%;
        }
        /* width 调整左边标题列宽度(左侧外观显示宽度); 指定为width:auto 在Opera下显示有问题; height比 t_r_content 高度小20px*/

        /* width 宽度为 右侧外观显示宽度 实际显示宽度大小为“t_r”宽度加上“cl_freeze”宽度 */
        /* 如果显示不正常,调整 t_r的width 使其和t_left的width之和小于100%;等于100%时会有问题*/
        .t_r {
            width: 69.5%;
            height: auto;
            float: left;
            border-top: 1px solid #000;
            border-right: #000 solid 1px;
        }

            .t_r table {
                width: 1700px;
            }

        .t_r_title {
            width: 1720px;
        }
        /*宽度比 t_r table 大20px (至少大20,小了滚动条滑到右侧显示有问题)*/
        .t_r_t {
            width: 100%;
            overflow: hidden;
        }

        .bordertop {
            border-top: 0px;
        }
    </style>
    <script>
        function aa() {
            var a = document.getElementById("t_r_content").scrollTop;
            var b = document.getElementById("t_r_content").scrollLeft;
            //document.getElementById("cl_freeze").scrollTop = a;
            document.getElementById("t_r_t").scrollLeft = b;
        }
    </script>
</head>

<body>
    <div style="width:100%">
        <div class="t_r">
            <div class="t_r_t" id="t_r_t">
                <div class="t_r_title">
                    <table>
                        <tr>
                            <th width="10%">字段A</th>
                            <th width="20%">字段B</th>
                            <th width="10%">字段C</th>
                            <th width="20%">字段D</th>
                            <th width="20%">字段E</th>
                            <th width="20%">字段F</th>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="t_r_content" id="t_r_content" onscroll="aa()">
                <table>
                    <tr>
                        <th width="10%">字段A</th>
                        <th width="20%">字段B</th>
                        <th width="10%">字段C</th>
                        <th width="20%">字段D</th>
                        <th width="20%">字段E</th>
                        <th width="20%">字段F</th>
                    </tr>
                    <tr>
                        <td width="10%" class="bordertop">1</td>
                        <td width="20%" class="bordertop">1</td>
                        <td width="10%" class="bordertop">1</td>
                        <td width="20%" class="bordertop">1</td>
                        <td width="20%" class="bordertop">1</td>
                        <td width="20%" class="bordertop">1</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                    </tr>
                    <tr>
                        <td>9</td>
                        <td>9</td>
                        <td>9</td>
                        <td>9</td>
                        <td>9</td>
                        <td>9</td>
                    </tr>
                    <tr>
                        <td>10</td>
                        <td>10</td>
                        <td>10</td>
                        <td>10</td>
                        <td>10</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td>11</td>
                        <td>11</td>
                        <td>11</td>
                        <td>11</td>
                        <td>11</td>
                    </tr>
                    <tr>
                        <td>12</td>
                        <td>12</td>
                        <td>12</td>
                        <td>12</td>
                        <td>12</td>
                        <td>12</td>
                    </tr>
                    <tr>
                        <td>13</td>
                        <td>13</td>
                        <td>13</td>
                        <td>13</td>
                        <td>13</td>
                        <td>13</td>
                    </tr>
                    <tr>
                        <td>14</td>
                        <td>14</td>
                        <td>14</td>
                        <td>14</td>
                        <td>14</td>
                        <td>14</td>
                    </tr>
                    <tr>
                        <td>15</td>
                        <td>15</td>
                        <td>15</td>
                        <td>15</td>
                        <td>15</td>
                        <td>15</td>
                    </tr>
                    <tr>
                        <td>16</td>
                        <td>16</td>
                        <td>16</td>
                        <td>16</td>
                        <td>16</td>
                        <td>16</td>
                    </tr>
                    <tr>
                        <td>17</td>
                        <td>17</td>
                        <td>17</td>
                        <td>17</td>
                        <td>17</td>
                        <td>17</td>
                    </tr>
                    <tr>
                        <td>18</td>
                        <td>18</td>
                        <td>18</td>
                        <td>18</td>
                        <td>18</td>
                        <td>18</td>
                    </tr>
                    <tr>
                        <td>19</td>
                        <td>19</td>
                        <td>19</td>
                        <td>19</td>
                        <td>19</td>
                        <td>19</td>
                    </tr>
                    <tr>
                        <td>20</td>
                        <td>20</td>
                        <td>20</td>
                        <td>20</td>
                        <td>20</td>
                        <td>20</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html> 
卖水果的net 2014-05-13
  • 打赏
  • 举报
回复
贴 css 上来;
myhope88 2014-05-13
  • 打赏
  • 举报
回复
没弄过,帮顶下
ahking 2014-05-12
  • 打赏
  • 举报
回复
顶一下!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

62,025

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧