Tool Tool - 8 months ago 32
HTML Question

HTML tables - How to make the child table's columns have the same width as it's parent table columns?

So, 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:

enter image description here

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?

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

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.