Question

I need to align rows in different tables that are layed out horizontally. I’d prefer to put the html code in a single web user control so I can create as many instances of that control as I want and lay them out horizontally. The problem is, the text in the rows needs to wrap. So some rows may expand vertically and some may not (see the example below). When that happens, the rows in the other tables aren’t aligned horizontally. I know I can accomplish all this by using a single table, but that would mean I’d have to duplicate the name, address and phone html code instead of dynamically creating new instances of my user control (in reality there are many more fields than this, but I’m keeping it simple). Is there any way to do this whether with div’s, tables or something else?

Here’s the problem: Mary Jane’s address field expands 2 lines, causing her phone field to not align properly with John’s and Bob’s.

Name:  John Doe           Name: Mary Jane                   Name: Bob Smith 

Address: 123 broadway     Address: Some really long address Address: Short address 

Phone: 123-456            that takes up multiple lines      Phone: [phone] 

                          Phone: 456-789

I’m not restricted in any way how to do this (other than using asp.net), but I’d prefer to use a single web control that I instantiate X times at design time (in this example, it’s 3 times). I’m using VS2008, and .Net 3.5

Answer 1

Just so everyone knows, this is possible. I finished the solution using jquery and it works pretty well. I assigned each table a specific css class and used that to identify which tables need to be resized (don’t want to use an id since each one must be unique). It works in the 4 major browsers. For IE7 make sure to add a space in the empty cells for this to work. Here’s the 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;
    }
}

Here’s the code to start the process. Add it to the main page and not the web control (if you’re using .net)

<script type="text/javascript">
    // runs automatically after this page has been loaded and rendered
    $(document).ready(function() {
        ResizeTableRows();
    });
</script>