Javascript 表格宽度/分区不正确

我使用Javascript方法同步两个表的列宽。下面是HTML、CSS和Javascript的代码。当div的大小等于或大于表时，表列同步良好，但当出现溢出（当前隐藏，稍后将添加滚动）时，表列不对齐。我知道表格宽度和列宽设置得很好（我使用一个记录器来检查每个表格的style.width），但它们显示的未对齐量约为12 px

这让我困惑了一段时间，我真的需要帮助。想法

CSS

HTML

$（文档）.ready（函数（）{
htmlogger控制实例.getInstance（）.setLevel（“调试”，htmlogger.ALL）；
syncColumnWidths（“标题”，null，“数据”，null）；
});
阿普泰特
标题1
头2真的很长
hd3
4.
alsdja；lksdjaljkdf
kdki
k39
lsjdl
alsdja；lksdjaljkdf
kdki
k39
lsjdl
alsdja；lksdjaljkdasdfaf
kdki
k39
lsjdl
alsdja；lksdjaljkdf
kdki
k39
lsjdl
alsdja；LKSDjKdfs
kdki
k39
lsjdl
alsdf
kdki
k39
lsjdl

JAVASCRIPT

/*
Utilities.js
Author: Steven T. Norris     Created: 3/2/2012
Updated By:                  Last Updated:
Copyright 2012

Utility functions
Logs to debug window if using Debug.aspx or a logger named 'debug' with the HtmlLoggerControlInstance
*/

/*
Syncs column sizes between two tables. 

@param string table1 : First table to sync
@param int table1HeadRow : Row to use as column width sync for table1 (if null, uses first row)
@param string table2 : Second table to sync
@param int table2HeadRow : Row to use as column width sync for table2 (if null, uses first row)
*/
function syncColumnWidths(table1, table1HeadRow, table2, table2HeadRow) {
    var tableTotal = 0
    UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths-")
    if((typeof table1 == "string" ||table1.constructor == String) && (typeof table2 == "string" ||table2.constructor == String)
        && (typeof table1HeadRow == "number" || table1HeadRow == null) && (typeof table2HeadRow == "number" || table1HeadRow == null)){
        tableOne = document.getElementById(table1);
        tableTwo = document.getElementById(table2);

        //Set row to check and get row
        if(table1HeadRow == null){
            t1Start = 0;
        }
        else{
            t1Start = table1HeadRow;
        }
        if(table2HeadRow == null){
            t2Start = 0;
        }
        else{
            t2Start = table2HeadRow;
        }
        t1Row = tableOne.rows[t1Start];
        t2Row = tableTwo.rows[t2Start];

        //Get end number
        if(t1Row.cells.length < t2Row.cells.length){
            tEnd = t1Row.cells.length;
        }
        else{
            tEnd = t2Row.cells.length;
        }

        //Sync widths
        for(i = 0; i < tEnd; i++){
            UtilLogger.log(HtmlLogger.CONFIG,"syncColumnWidths:t1 width:"+t1Row.cells[i].offsetWidth+"   t2 width:"+t2Row.cells[i].offsetWidth);
            if(t1Row.cells[i].offsetWidth > t2Row.cells[i].offsetWidth){
                t2Row.cells[i].style.width = t1Row.cells[i].offsetWidth+"px";
                t1Row.cells[i].style.width = t1Row.cells[i].offsetWidth+"px";
                UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t2 width to t1");
                UtilLogger.log(HtmlLogger.FINER, "syncColumnwidths:t1 style width:" + t1Row.cells[i].style.width + "    t2 style width:" + t2Row.cells[i].style.width);
                tableTotal = tableTotal + t1Row.cells[i].offsetWidth
            }
            else{
                t1Row.cells[i].style.width = t2Row.cells[i].offsetWidth+"px";
                t2Row.cells[i].style.width = t2Row.cells[i].offsetWidth+"px";
                UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t1 width to t2");
                UtilLogger.log(HtmlLogger.FINER,"syncColumnwidths:t1 style width:"+t1Row.cells[i].style.width+"    t2 style width:"+t2Row.cells[i].style.width);
                tableTotal = tableTotal + t2Row.cells[i].offsetWidth
            }
        }
        UtilLogger.log(HtmlLogger.FINE, "setting main table width to " + tableTotal);
        tableOne.style.width = tableTotal + "px"
        tableTwo.style.width = tableTotal + "px"
        UtilLogger.log(HtmlLogger.FINER, "tableOne width: " + tableOne.style.width);
        UtilLogger.log(HtmlLogger.FINER, "tableTwo width: " + tableTwo.style.width);

    }
    else{
        alert("syncColumnWidths takes parameters (string, int|null, string, int|null)");
    }
    UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths Complete-");
}

/*
Syncs scrolling of two divs. Meant to be part of onscroll event for primary div 

@param string div1 : primary div. normally the div who's onclick event houses this method
@param string div2 : secondary div
*/
function syncScrolling(div1,div2){
    if((typeof div1 == "string" || div1.constructor == String) && (typeof div2 == "string" || div2.cosntructor == String)){
        $("#"+div2).scrollLeft($("#"+div1).scrollLeft());
    }
    else{
        alert("syncScrolling takes parameters (string, string)");
    }
}

/*
Utilities.js
作者：Steven T.Norris创作日期：2012年3月2日
更新人：上次更新：
版权所有2012
效用函数
如果在HtmlLoggerControlInstance中使用debug.aspx或名为“debug”的记录器，则记录到调试窗口
*/
/*
在两个表之间同步列大小。
@参数字符串table1:要同步的第一个表
@param int table1headlow：用作表1列宽同步的行（如果为null，则使用第一行）
@参数字符串表2：要同步的第二个表
@param int table2headlow：用作表2列宽同步的行（如果为null，则使用第一行）
*/
功能同步列宽度（表1、表1净空高度、表2、表2净空高度）{
var tableTotal=0
UtilLogger.log（htmlogger.INFO，“-同步列宽-”）
如果（（typeof table1==“string”| | table1.constructor==string）和&（typeof table2==“string”| | table2.constructor==string）
&&（Table1Headlow的类型==“数字”| | Table1Headlow==null）和&（Table2Headlow的类型==“数字”| | Table1Headlow==null））{
tableOne=document.getElementById（表1）；
tableTwo=document.getElementById（表2）；
//设置行以检查并获取行
如果（表1净空==null）{
t1Start=0；
}
否则{
t1Start=表1水头；
}
如果（表2headlow==null）{
t2Start=0；
}
否则{
t2Start=表2水头；
}
t1Row=tableOne.rows[t1Start]；
t2Row=tableTwo.rows[t2Start]；
//获取结束号
if（t1Row.cells.lengtht2Row.cells[i].offsetWidth）{
t2Row.cells[i].style.width=t1Row.cells[i].offsetWidth+“px”；
t1Row.cells[i].style.width=t1Row.cells[i].offsetWidth+“px”；
log（htmlogger.FINE，“syncColumnWidths:将t2宽度设置为t1”）；
日志（htmlogger.FINER，“syncColumnwidths:t1样式宽度：”+t1Row.cells[i].style.width+“t2样式宽度：”+t2Row.cells[i].style.width）；
tableTotal=tableTotal+t1Row.cells[i].offsetWidth
}
否则{
t1Row.cells[i].style.width=t2Row.cells[i].offsetWidth+“px”；
t2Row.cells[i].style.width=t2Row.cells[i].offsetWidth+“px”；
log（htmlogger.FINE，“syncColumnWidths:将t1宽度设置为t2”）；
日志（htmlogger.FINER，“syncColumnwidths:t1样式宽度：”+t1Row.cells[i].style.width+“t2样式宽度：”+t2Row.cells[i].style.width）；
tableTotal=tableTotal+t2Row.cells[i].offsetWidth
}
}
UtilLogger.log（htmlogger.FINE，“将主表宽度设置为”+tabletottal）；
tableOne.style.width=tableTotal+“px”
tableTwo.style.width=tableTotal+“px”
log（htmlogger.FINER，“tableOne宽度：”+tableOne.style.width）；
log（htmlogger.FINER，“tableTwo宽度：”+tableTwo.style.width）；
}
否则{
警报（“syncColumnWidths接受参数（string，int | null，string，int | null）”）；
}
UtilLogger.log（htmlogger.INFO，“-同步列宽完成-”；
}
/*
同步两个div的滚动。作为主要部门onscroll活动的一部分
@param string div1:primary div。通常，onclick事件的div包含此方法
@参数字符串div2：辅助div
*/
函数同步滚动（div1、div2）{
if（（typeof div1==“string”| | div1.constructor==string）和&（typeof div2==“string”| | div2.coconstructor==string））{
$（“#”+div2.scrollLeft（$（“#”+div1.scrollLeft（））；
}
否则{
警报（“同步滚动获取参数（字符串，字符串）”）；
}
}

在新的帖子中重复发布和回复

请参阅下面的链接

可能存在的副本

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@language = "C#" inherits="APTEIT.Default"%>
<!--
Default.aspx
Author: Steven T. Norris    Created: 2/28/2012
Last Updated:   Updated By: 
Default page of APTEIT
-->
<link rel="stylesheet" type="text/css" href="CSS/APTEIT.css"/>
<script type="text/javascript" src="Utilities/Javascript/Utilities.js"></script>
<script type="text/javascript" src="Utilities/Javascript/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    HtmlLoggerControlInstance.getInstance().setLevel("debug",HtmlLogger.ALL);
    syncColumnWidths("headers",null,"data",null);
});
</script>
<html>
    <head>
        <title>APTEIT</title>
    </head>
    <body>
        <!--#include file="Utilities/Debug.aspx"-->
        <img src="Images/logo.png" />
        <div id="headersDiv">
            <table class="tbl" id="headers">
                <tr>
                    <td>head1</td>
                    <td>head2reallyreallylong</td>
                    <td>hd3</td>
                    <td>4</td>
                </tr>
            </table>
        </div>
        <div id="dataDiv" onscroll="syncScrolling('dataDiv','headersDiv');">
            <table class="tbl" id="data">
            <tr>
                <td>alsdja;lksdjaljkdf</td>
                <td>kdki</td>
                <td>k39</td>
                <td>lsjdl</td>
            </tr>
            <tr>
                <td>alsdja;lksdjaljkdf</td>
                <td>kdki</td>
                <td>k39</td>
                <td>lsjdl</td>
            </tr><tr>
                <td>alsdja;lksdjaljkdasdfaf</td>
                <td>kdki</td>
                <td>k39</td>
                <td>lsjdl</td>
            </tr><tr>
                <td>alsdja;lksdjaljkdf</td>
                <td>kdki</td>
                <td>k39</td>
                <td>lsjdl</td>
            </tr><tr>
                <td>alsdja;lksdjaljkdfs</td>
                <td>kdki</td>
                <td>k39</td>
                <td>lsjdl</td>
            </tr><tr>
                <td>alsdf</td>
                <td>kdki</td>
                <td>k39</td>
                <td>lsjdl</td>
            </tr>
            </table>
        </div>
    </body>
</html>

/*
Utilities.js
Author: Steven T. Norris     Created: 3/2/2012
Updated By:                  Last Updated:
Copyright 2012

Utility functions
Logs to debug window if using Debug.aspx or a logger named 'debug' with the HtmlLoggerControlInstance
*/

/*
Syncs column sizes between two tables. 

@param string table1 : First table to sync
@param int table1HeadRow : Row to use as column width sync for table1 (if null, uses first row)
@param string table2 : Second table to sync
@param int table2HeadRow : Row to use as column width sync for table2 (if null, uses first row)
*/
function syncColumnWidths(table1, table1HeadRow, table2, table2HeadRow) {
    var tableTotal = 0
    UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths-")
    if((typeof table1 == "string" ||table1.constructor == String) && (typeof table2 == "string" ||table2.constructor == String)
        && (typeof table1HeadRow == "number" || table1HeadRow == null) && (typeof table2HeadRow == "number" || table1HeadRow == null)){
        tableOne = document.getElementById(table1);
        tableTwo = document.getElementById(table2);

        //Set row to check and get row
        if(table1HeadRow == null){
            t1Start = 0;
        }
        else{
            t1Start = table1HeadRow;
        }
        if(table2HeadRow == null){
            t2Start = 0;
        }
        else{
            t2Start = table2HeadRow;
        }
        t1Row = tableOne.rows[t1Start];
        t2Row = tableTwo.rows[t2Start];

        //Get end number
        if(t1Row.cells.length < t2Row.cells.length){
            tEnd = t1Row.cells.length;
        }
        else{
            tEnd = t2Row.cells.length;
        }

        //Sync widths
        for(i = 0; i < tEnd; i++){
            UtilLogger.log(HtmlLogger.CONFIG,"syncColumnWidths:t1 width:"+t1Row.cells[i].offsetWidth+"   t2 width:"+t2Row.cells[i].offsetWidth);
            if(t1Row.cells[i].offsetWidth > t2Row.cells[i].offsetWidth){
                t2Row.cells[i].style.width = t1Row.cells[i].offsetWidth+"px";
                t1Row.cells[i].style.width = t1Row.cells[i].offsetWidth+"px";
                UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t2 width to t1");
                UtilLogger.log(HtmlLogger.FINER, "syncColumnwidths:t1 style width:" + t1Row.cells[i].style.width + "    t2 style width:" + t2Row.cells[i].style.width);
                tableTotal = tableTotal + t1Row.cells[i].offsetWidth
            }
            else{
                t1Row.cells[i].style.width = t2Row.cells[i].offsetWidth+"px";
                t2Row.cells[i].style.width = t2Row.cells[i].offsetWidth+"px";
                UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t1 width to t2");
                UtilLogger.log(HtmlLogger.FINER,"syncColumnwidths:t1 style width:"+t1Row.cells[i].style.width+"    t2 style width:"+t2Row.cells[i].style.width);
                tableTotal = tableTotal + t2Row.cells[i].offsetWidth
            }
        }
        UtilLogger.log(HtmlLogger.FINE, "setting main table width to " + tableTotal);
        tableOne.style.width = tableTotal + "px"
        tableTwo.style.width = tableTotal + "px"
        UtilLogger.log(HtmlLogger.FINER, "tableOne width: " + tableOne.style.width);
        UtilLogger.log(HtmlLogger.FINER, "tableTwo width: " + tableTwo.style.width);

    }
    else{
        alert("syncColumnWidths takes parameters (string, int|null, string, int|null)");
    }
    UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths Complete-");
}

/*
Syncs scrolling of two divs. Meant to be part of onscroll event for primary div 

@param string div1 : primary div. normally the div who's onclick event houses this method
@param string div2 : secondary div
*/
function syncScrolling(div1,div2){
    if((typeof div1 == "string" || div1.constructor == String) && (typeof div2 == "string" || div2.cosntructor == String)){
        $("#"+div2).scrollLeft($("#"+div1).scrollLeft());
    }
    else{
        alert("syncScrolling takes parameters (string, string)");
    }
}