表列寬度匹配
[英]Table Column Width Matching
問題描述
更新：找到解決方案
更新：沒有建議的答案。 我沒有找到解決方案。 有人嗎
我正在使用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-
2 個解決方案
解決方案1
3 已采納 2012-03-21 12:37:03
兩個表的表布局都必須固定，以便調整單元格的大小並影響整個表。 默認情況下，這是自動的，並且表格會根據其容器的大小/單元格的內容進行調整。
解決方案2
0 2013-12-08 15:10:52
這在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++;
}
);
}
匹配表列寬的文本框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.