Click here to Skip to main content
16,013,440 members
Home / Discussions / Web Development
   

Web Development

 
AnswerRe: Can i control the application variables dynamicly Pin
lizhill11-Aug-02 20:10
lizhill11-Aug-02 20:10 
GeneralRe: Can i control the application variables dynamicly Pin
david fox12-Aug-02 4:47
david fox12-Aug-02 4:47 
GeneralDrop Down w/Multiple Selections Pin
Robby9-Aug-02 7:57
Robby9-Aug-02 7:57 
GeneralRe: Drop Down w/Multiple Selections Pin
Ryan Johnston9-Aug-02 9:59
Ryan Johnston9-Aug-02 9:59 
GeneralRe: Drop Down w/Multiple Selections Pin
Jared Solomon9-Aug-02 11:32
Jared Solomon9-Aug-02 11:32 
GeneralRe: Drop Down w/Multiple Selections Pin
lizhill11-Aug-02 20:02
lizhill11-Aug-02 20:02 
GeneralAccess Page from TypeConverter Pin
Jamie Nordmeyer9-Aug-02 5:51
Jamie Nordmeyer9-Aug-02 5:51 
QuestionHow to make the columns of two tables have the same width? Pin
Alvaro Mendez9-Aug-02 5:10
Alvaro Mendez9-Aug-02 5:10 
I have a web page which displays a table with about 10 columns and hundreds of rows. The problem is that when the user scrolls down to see the lower rows, the first row (which contains the name of each column) scrolls away and the user has a hard time figuring out what each column represents.

The solution: to make the rows scrollable!

I broke the table up into two separate tables -- the top one containing just the row with the column titles and the bottom ones containing the actual data. I enclosed the bottom table inside a div with overflow-y:auto. This gives me the effect I need, but I had to make some adjustments:

1. Resize the div when the user resizes the browser window. No problem.
2. Resize the div when the number of rows is smaller than its height. No problem.
3. Make each column in the top table the same width as the corresponding column in the bottom table. Big problem!

My algorithm for resizing the columns is pretty simple (see below). First it makes the size of the top columns the same as the ones in the bottom table. Then, for any columns that remain out of synch, the bottom columns are resized to match the top columns. This works beautifully as long as the window is big enough. As soon as I start shrinking it too much, the columns can no longer be matched in width and the whole thing looks ugly.

Do you know of any JavaScript code I can use that can do this for me? I basically need an algorithm for keeping the column widths of two tables (with the same number of columns) consistent. This is only for IE; I don't care about Netscrape.

Thanks a bunch!
Alvaro


function matchColumnWidths(tableHeading, tableData)
{
	// This only works for IE
	if (!document.all)
		return;
 
	// Verify there are rows and that the column counts match
	if (tableHeading.rows.length == 0 || 
		tableData.rows.length == 0 ||
		tableHeading.rows(0).cells.length != tableData.rows(0).cells.length)
		return;
 
	// Reset the widths of both tables
	for (var i = 0; i < tableData.rows[0].cells.length - 1; i++)
	{
		tableHeading.rows[0].cells[i].width = "";
		tableData.rows[0].cells[i].width = "";
	}
  
	// Change the heading's column widths to match the data's, for all columns except the last one
	for (var i = 0; i < tableData.rows[0].cells.length - 1; i++)
		tableHeading.rows[0].cells[i].width = tableData.rows[0].cells[i].clientWidth - 
			(tableData.cellPadding * 2 - (tableData.cellPadding - tableHeading.cellPadding) * 2) + 
			(tableData.cellSpacing - tableHeading.cellSpacing);
 
	// If there's still discrepancies, change the data's column widths to match the heading's, for all columns except the last one
	for (var i = 0; i < tableData.rows[0].cells.length - 1; i++)
	{
		if (tableHeading.rows[0].cells[i].clientWidth != tableData.rows[0].cells[i].clientWidth)
		{
			tableData.rows[0].cells[i].width = tableHeading.rows[0].cells[i].clientWidth - 
				(tableHeading.cellPadding * 2 - (tableHeading.cellPadding - tableData.cellPadding) * 2) + 
				(tableHeading.cellSpacing - tableData.cellSpacing);
		}
	}
}



Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein
AnswerRe: How to make the columns of two tables have the same width? Pin
Jeremy Falcon9-Aug-02 5:49
professionalJeremy Falcon9-Aug-02 5:49 
GeneralRe: How to make the columns of two tables have the same width? Pin
Alvaro Mendez9-Aug-02 6:29
Alvaro Mendez9-Aug-02 6:29 
AnswerA solution! Pin
Alvaro Mendez9-Aug-02 9:57
Alvaro Mendez9-Aug-02 9:57 
GeneralCatch enter pressing Pin
Mazdak9-Aug-02 3:24
Mazdak9-Aug-02 3:24 
GeneralRe: Catch enter pressing Pin
Jared Solomon9-Aug-02 10:58
Jared Solomon9-Aug-02 10:58 
GeneralRe: Catch enter pressing Pin
Mazdak9-Aug-02 19:15
Mazdak9-Aug-02 19:15 
GeneralPrint HTMl Pin
Raju Pande MKCL Pune8-Aug-02 23:36
sussRaju Pande MKCL Pune8-Aug-02 23:36 
GeneralRe: Print HTMl Pin
Paul Watson9-Aug-02 0:36
sitebuilderPaul Watson9-Aug-02 0:36 
QuestionCompile a String of Email Addresses? Pin
Robby8-Aug-02 11:58
Robby8-Aug-02 11:58 
AnswerRe: Compile a String of Email Addresses? Pin
Bullschmidt8-Aug-02 16:31
Bullschmidt8-Aug-02 16:31 
GeneralRe: Compile a String of Email Addresses? Pin
Robby9-Aug-02 3:15
Robby9-Aug-02 3:15 
QuestionFill out a form dynamically? Pin
JohnnyNin8-Aug-02 11:18
JohnnyNin8-Aug-02 11:18 
AnswerRe: Fill out a form dynamically? Pin
Jared Solomon8-Aug-02 12:18
Jared Solomon8-Aug-02 12:18 
AnswerRe: Fill out a form dynamically? Pin
Todd Smith8-Aug-02 13:16
Todd Smith8-Aug-02 13:16 
AnswerRe: Fill out a form dynamically? Pin
Paul Watson9-Aug-02 0:41
sitebuilderPaul Watson9-Aug-02 0:41 
GeneralASP client-side script debugging with VID,how to?. Pin
Romeo8-Aug-02 7:39
Romeo8-Aug-02 7:39 
GeneralRe: ASP client-side script debugging with VID,how to?. Pin
Jeremy Falcon8-Aug-02 7:40
professionalJeremy Falcon8-Aug-02 7:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.