大家都知道,这是可能的。我使用jquery完成了这个解决方案,它工作得很好。我为每个表分配了一个特定的CSS类,并使用它来标识哪些表需要调整大小(不想使用ID,因为每个表都必须是唯一的)。它适用于4种主要浏览器。对于IE7,请确保在空单元格中添加一个空间以使其正常工作。这是javascript:
function ResizeTableRows() {
// select tables by css class name using jquery
var tables = $('.myCssClassName');
// all tables should have the save number of rows, so just use the first one
var totalRows = tables[0].rows.length;
for (var rowNumber = 0; rowNumber < totalRows; rowNumber++) {
var maxRowHeight = GetMaxRowHeight(tables, rowNumber);
for (var i = 0; i < tables.length; i++) {
if (maxRowHeight > 0) {
tables[i].rows[rowNumber].height = maxRowHeight;
SetCellHeight(tables[i].rows[rowNumber].cells, maxRowHeight);
}
}
}
}
function GetMaxRowHeight(tables, rowNumber) {
var maxRowHeight = 0;
for (var i = 0; i < tables.length; i++) {
var row1 = tables[i].rows[rowNumber];
var cell1 = row1.cells[0];
var rowHeight = row1.clientHeight;
if (rowHeight <= 0) {
rowHeight = row1.height;
}
if (rowHeight <= 0) {
rowHeight = cell1.clientHeight;
}
if (rowHeight > maxRowHeight) {
maxRowHeight = rowHeight;
}
}
return maxRowHeight;
}
function SetCellHeight(cells, maxRowHeight) {
for (var i = 0; i < cells.length; i++) {
cells[i].height = maxRowHeight;
}
}
这是启动过程的代码。将其添加到主页而不是Web控件(如果使用.NET)
<script type="text/javascript">
// runs automatically after this page has been loaded and rendered
$(document).ready(function() {
ResizeTableRows();
});
</script>