表列寬匹配

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

回答

相關問題