表列宽匹配

UPDATE：发现的解决方案表列宽匹配

UPDATE：没有提出答案。没有找到解决方案。任何人？

我使用javascript来匹配两个独立表中的列的宽度（使用它创建一个可滚动的粘滞表头，如果数据全部可见（没有溢出），该方法工作正常。。做溢出，但是表中的列不对准我有一个调试流，显示offsetWidths仍然返回相同的数字上为什么发生这种情况的任何想法

主要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>

Javascript方法：

/* 
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){ 
    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"); 
      } 
      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"); 
      } 
     } 

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

CSS：

.tbl{ 
border-collapse:collapse; 
} 
.tbl tr td{ 
border-width:1px; 
border-color:black; 
border-style:solid; 
} 

#headersDiv{ 
max-width:100px; 
overflow:hidden; 
} 

#dataDiv{ 
max-width:100px; 
overflow:auto; 
}

调试打印：需要固定在为了调节单元的尺寸，并有它影响表作为

-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-

来源

2012-03-06 steventnorris

溢出创建一个滚动条，从而降低宽度。 – kirilloid 2012-03-06 18:54:23

它不应该减少细胞的宽度，但对吗？只是div的宽度？ – steventnorris 2012-03-06 20:03:22

它应该减少div的内部（可用）宽度。如果你的表格的宽度= 100％（或者有足够的宽度，以适应整个div），它的宽度将会减少，以及单元格的宽度也会减小。 – kirilloid 2012-03-06 20:06:58

表布局两个表整个。默认情况下，这是自动的，表格调整到它的单元格容器/内容的大小。

来源

2012-03-21 12:37:03 steventnorris

这达特工作对我来说，应该适应的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++; 
    } 
    ); 
    }

来源

2013-12-08 15:10:52

回答

相关问题