Question

I have a table with 14 td within tr. After the first row(tr) I want to add dynamic row(tr) and div within tr using jquery. That dynamically added tr and div will have other table with some data. Now what happens is that whole table (dynamically added) fits in first td of the dynamically added row. I don’t want this, I want it to be stretched throughout the page (means fit in dynamically added tr). How do you do that?

In the image you can see how the whole table in fitted within first td

I am adding dynamic tr and div inside tr like this

 $('#'+row_id).after('<tr><div  id="trip_detail_id"></div></tr>'); 

where row_id is the id of the tr.

Answer 1

You have to wrap your <div> within a <td> with a colspan over all columns.

var row = $('#'+row_id);
row.after('<tr><td colspan="'+ row.children().length +'"><div  id="trip_detail_id"></div></td></tr>'); 

The code would be a bit more complicated, if you already use colspan for <td>s in a row. Then you have to iterate thru all children and check for colspan attribute, to get the correct column count.