CODEWITHSUNDEEP
htmlcssjquery-uistylesheet
Hussy
Hussy

Reputation: 2029

Div inside table

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?

screenshot of table

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.

Upvotes: 0

Views: 1381

Answers (1)

DanielB
DanielB

Reputation: 20230

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.

Upvotes: 2

Related Questions