Question

I have a table within a table (inside a td).

This child table has exactly the same number of columns as the parent table.

The only problem is, the child table’s columns aren’t the same width as the parent table’s columns.

This is how it looks like:

How should I style the child table?

Is there a predefined way to fix this?

Or do I need to write a “normalization” function via jquery which will change the width of columns on page load?

Answer 1

function normaliseWidth(id)
{
    iter = 1;
    $("#splitForm" + id + " td").each(function() {
        //alert($(this)); 
        $(this).width($("#" + id + " td:nth-child(" + iter + ")").width());
        ++iter;
    });
}

I just iterated through all the td’s and changed their width to parent’s width.

This seems to have fixed it. I’m hoping there won’t be any side effects to this. Thanks for all the help.