How To Make The Child Table's Columns Have The Same Width As It's Parent Table Columns?

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

Solution 1:

Why do you need to create another table if they have the same number of columns. You should just add a row instead of another table. That way your column will be the same.

The problem is the content of your inner table is pushing cells width.

Solution 2:

The answer is a couple different things.

the fastest way would be to add classes to each column (and make sure they pair up between parent/child). I usually use a "col-" prefix. Set your widths to the classes and you should be a lot closer.

Also be sure to remove any borders, paddings, margins, etc. if it still isnt quite right look into border-collapse

Solution 3:

If you are forced to do it that way, either specify the width of each column explicitly using CSS or the HTML attribute in both tables.

You could also write javascript code that happens after the page is loaded to adjust the size of the columns of that top table to match the bottom table. You're mileage may vary with this approach.

Your comment in another answer about needing a form for each row makes me think you could modify your layout to put the form around the table and combine the two tables to have the header and data rows in the same table. Then make some backend code changes to handle the posts differently.

Solution 4:

functionnormaliseWidth(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.

Solution 5:

Try to make use of the rowspan attribute rather than nesting tables. If you need, say 3 sets of data, but want them all to have the same heading (on the left side) set the row span of that left cell to 3, and leave each of the others with the default of 1. You'll need to neglect adding that cell for the subsequent rows.

See: http://www.w3schools.com/tags/att_td_rowspan.asp