I am attempting to sync the column widths of two tables. Currently, I have a working method that uses the DOM to traverse each cell of a given row of two tables and set the style.width element to the largest offsetWidth of the the two cells. However, when the divs my tables are in are given an overflow: auto property, causing scrollbars, the widths no longer sync. They style.width elements are still being set (I'm using a debugging method to check the style.width elements for their values), but no sizes are changing. Ideas?
Without seeing your code, I can only take a guess.
Try changing the tables' table-layout style to fixed. By default, it is set to auto which means the table's width is determined by cell contents to a large extent. Setting it to fixed means the table width is determined by the width you set to it and any cells and the cell contents are not taken into account at all.
Are you applying the same class to the various <col> or <colgroup> tags in both tables? That's the easiest way to make sure the same styles are applied to both tables.
Without seeing your code, I can only take a guess.
Try changing the tables' table-layout style to fixed. By default, it is set to auto which means the table's width is determined by cell contents to a large extent. Setting it to fixed means the table width is determined by the width you set to it and any cells and the cell contents are not taken into account at all.
The fixed bit worked... sort of... The columns are the same size, but aren't resizing. I think I'll need to change the overall table width as well with this method. Also, now I'm having a scrolling issue. I'll edit my above post to include code, because I'm pretty sure figuring this one out without it is going to be hard. Thanks for you help, if you have any insight on the scrolling problem, please let me know. The columns appear aligned, but the scrolling gets off towards the end of the scrolling. I'm assuming because the scrollbar is taking up space. Is there a way to move the scrollbar to the outside a bit so it will not be taking up that space?
Last edited by StevenTNorris; 03-21-2012 at 03:00 PM..
Reason: correction on workability
This is still not working correctly. I've added some to the javascript, changing the table-length as well as the cell lengths, but when there is overflow, they are still disaligned, even if overflow is set to hidden to avoid the scrollbars. If there is no overflow, they alilgn fine. What is going on??
Code:
/*
Utilities.js
Author: Steven T. Norris Created: 3/2/2012
Updated By: Last Updated:
Copyright 2012
Utility functions
Logs to debug window if using Debug.aspx or a logger named 'debug' with the HtmlLoggerControlInstance
*/
/*
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) {
var tableTotal = 0
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");
UtilLogger.log(HtmlLogger.FINER, "syncColumnwidths:t1 style width:" + t1Row.cells[i].style.width + " t2 style width:" + t2Row.cells[i].style.width);
tableTotal = tableTotal + t1Row.cells[i].offsetWidth
}
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");
UtilLogger.log(HtmlLogger.FINER,"syncColumnwidths:t1 style width:"+t1Row.cells[i].style.width+" t2 style width:"+t2Row.cells[i].style.width);
tableTotal = tableTotal + t2Row.cells[i].offsetWidth
}
}
UtilLogger.log(HtmlLogger.FINE, "setting main table width to " + tableTotal + "px");
tableOne.style.width = tableTotal + "px"
tableTwo.style.width = tableTotal + "px"
}
else{
alert("syncColumnWidths takes parameters (string, int|null, string, int|null)");
}
UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths Complete-");
}
/*
Syncs scrolling of two divs. Meant to be part of onscroll event for primary div
@param string div1 : primary div. normally the div who's onclick event houses this method
@param string div2 : secondary div
*/
function syncScrolling(div1,div2){
if((typeof div1 == "string" || div1.constructor == String) && (typeof div2 == "string" || div2.cosntructor == String)){
$("#"+div2).scrollLeft($("#"+div1).scrollLeft());
}
else{
alert("syncScrolling takes parameters (string, string)");
}
}
Before you post, read our: 
