Fatal编程技术网

Javascript 表列宽匹配

javascript html

Javascript 表列宽匹配,javascript,html,html-table,width,offsetwidth,Javascript,Html,Html Table,Width,Offsetwidth,更新：找到解决方案 更新：没有建议的答案。我这边没有找到解决办法。有人吗？ 我正在使用javascript来匹配两个独立表中的列宽度（使用它来创建一个可滚动的、粘性的标题表。如果数据都是可见的（没有溢出），该方法工作正常。但是，如果表溢出，则表列不对齐。我有一个调试流，显示OffsetWidth仍返回相同的数字。您知道为什么会发生这种情况吗 主HTML： <link rel="stylesheet" type="text/css" href="CSS/APTEIT.css"/> &l

更新：找到解决方案

更新：没有建议的答案。我这边没有找到解决办法。有人吗？

我正在使用javascript来匹配两个独立表中的列宽度（使用它来创建一个可滚动的、粘性的标题表。如果数据都是可见的（没有溢出），该方法工作正常。但是，如果表溢出，则表列不对齐。我有一个调试流，显示OffsetWidth仍返回相同的数字。您知道为什么会发生这种情况吗

主HTML：

<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>
调试打印：

-Syncing Column Widths Complete-
syncColumnwidths:t1 style width:28px t2 style width:28px
syncColumnWidths:setting t1 width to t2
syncColumnWidths:t1 width:12 t2 width:28
syncColumnwidths:t1 style width:27px t2 style width:27px
syncColumnWidths:setting t1 width to t2
syncColumnWidths:t1 width:26 t2 width:27
syncColumnwidths:t1 style width:129px t2 style width:129px
syncColumnWidths:setting t2 width to t1
syncColumnWidths:t1 width:129 t2 width:30
syncColumnwidths:t1 style width:137px t2 style width:137px
syncColumnWidths:setting t1 width to t2
syncColumnWidths:t1 width:40 t2 width:137
-Syncing Column Widths-
-Default Page Loaded-
-Default Page Loading-
两个表的表布局都需要固定，以便调整单元格的大小并使其影响整个表。默认情况下，这是自动的，表会根据其容器/单元格内容的大小进行调整。

两个表的表布局都需要固定，以便调整单元格的大小并使其影响整个表表作为一个整体。默认情况下，这是自动的，表会根据其容器/单元格内容的大小进行调整。

这在Dart中对我有效，应该适用于js

adjustHeaderWidth() {
    if ( tableHeader.rows.length < 1 || table.rows.length < 1 )
      return;
    List hd = tableHeader.rows[0].cells;
    List bd = table.rows[0].cells;
    if ( hd.length < 1 || bd.length < 1) 
      return;
    num index = 0;
    hd.forEach((f) { 
       var width = math.max(bd[index].client.width, f.client.width);
       f.style.width = '${width}px';  
       bd[index].style.width='${width}px';
       index++;
     }
    );
  }

adjustHeaderWidth（）{
if（tableHeader.rows.length<1 | | table.rows.length<1）
返回；
List hd=tableHeader.rows[0]。单元格；
List bd=表格。行[0]。单元格；
如果（hd.length<1 | | bd.length<1）
返回；
num指数=0；
hd.forEach（（f）{
var width=math.max（bd[index].client.width，f.client.width）；
f、 style.width='${width}px'；
bd[index].style.width='${width}px'；
索引++；
}
);
}
这在Dart中对我有效，应该适用于js

adjustHeaderWidth() {
    if ( tableHeader.rows.length < 1 || table.rows.length < 1 )
      return;
    List hd = tableHeader.rows[0].cells;
    List bd = table.rows[0].cells;
    if ( hd.length < 1 || bd.length < 1) 
      return;
    num index = 0;
    hd.forEach((f) { 
       var width = math.max(bd[index].client.width, f.client.width);
       f.style.width = '${width}px';  
       bd[index].style.width='${width}px';
       index++;
     }
    );
  }

adjustHeaderWidth（）{
if（tableHeader.rows.length<1 | | table.rows.length<1）
返回；
List hd=tableHeader.rows[0]。单元格；
List bd=表格。行[0]。单元格；
如果（hd.length<1 | | bd.length<1）
返回；
num指数=0；
hd.forEach（（f）{
var width=math.max（bd[index].client.width，f.client.width）；
f、 style.width='${width}px'；
bd[index].style.width='${width}px'；
索引++；
}
);
}
Overflow创建了一个滚动条，它减少了宽度。它不应该减少单元格的宽度，对吗？只是减少div的宽度？它应该减少div的内部（可用）宽度。如果您的表的宽度=100%（或有足够的宽度，以适应整个div），它的宽度将与单元格的宽度一样减少。此外，
t1Row.cells[i].style.width=t2Row.cells[i].offsetWidth；
不起作用。
style.width
应该有一些维度。例如，在您的情况下，
px
（像素）。滚动条不会改变单元格的宽度。请看我添加的编辑。这些是我得到的调试打印。我也添加了“px”。我的意思是从这里开始。溢出创建了一个滚动条，它会减少单元格的宽度。它不应该减少单元格的宽度，对吗？只是div的宽度？它应该减少内部的宽度（可用）div的宽度。如果您的表的宽度=100%（或有足够的宽度，以适合整个div），则其宽度将与单元格的宽度一样减小。此外，
t1Row.cells[i]。style.width=t2Row.cells[i]。offsetWidth；
将不起作用。
style.width
应该有一些尺寸。例如，在您的情况下，
px
（像素）。滚动条不会改变单元格的宽度。请看我添加的编辑。这些是我得到的调试打印。我也添加了“px”。我的意思是从这里开始。 
adjustHeaderWidth() {
    if ( tableHeader.rows.length < 1 || table.rows.length < 1 )
      return;
    List hd = tableHeader.rows[0].cells;
    List bd = table.rows[0].cells;
    if ( hd.length < 1 || bd.length < 1) 
      return;
    num index = 0;
    hd.forEach((f) { 
       var width = math.max(bd[index].client.width, f.client.width);
       f.style.width = '${width}px';  
       bd[index].style.width='${width}px';
       index++;
     }
    );
  }