Jquery datatables - fnopen() detail table does not occupy full width

Question

I have a set of rows I am displaying via jQuery datatables , basically using a grid list in MVC ASP.net and then using jQuery datatables to expand each row of data to show new table data. The detail table data does not occupy the full width of the row and shows up like this

Table example

My call to open table function is

oTable.fnOpen(nTr, details, 'LP')

where LP is the styling class of the parent table as seen in the figure, but it is not being applied. Ive tried applying the styling to the HTML itself of the detail rows but to no avail How do I make it take the styling of the parent table and occupy the width of the parent table?

ANSWER:

It turns out my sortable columns in the parent table were preventing the styling from working with the child tables - I havent studied enough to learn why yet, but something as a reference to anyone with the problem. Putting a sort on all columns of the parent table and changing the styling of the child to include 100% width worked.

mainguy · Accepted Answer · 2014-02-28 12:37:42Z

1

+50

I coded this Plunker which is derived from the dataTables examples.

subtables

It seems to do what you wanted. (Ignore the broken icons, plz).

Since I don't know any of your code I had to construct this lengthy script. But in fact it comes down to simply adding a width of 100% to your subtable (line 4 of plunker code):

 var sOut = '<table class="subtable" style="width:100%">';

Please check this out and use my plunker as a base for further refinements that can be discussed here. (Others might be of help too, if you show them some of your code).

Hope this helps. (Btw, very nice fjords!)

answered Feb 28, 2014 at 12:37

mainguy

8,3312 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vrashabh Irde Over a year ago

Thanks, This helped me to get to the answer in my case, though my case was specific, this post helps me, so awarding the bounty

Jack Over a year ago

@mainguy Could you pelase hav e look at Cannot list details data in jQuery Datatable? Thanks in advance...

Ted · Accepted Answer · 2014-03-04 22:10:11Z

0

This may be completely useless, but I ran into a very similar issue with datatables and the problem was the table's css display property was set to 'block'. Once removed, no problem. On the off chance yours is doing that, I thought I'd post.

answered Mar 4, 2014 at 22:10

Ted

14.9k2 gold badges43 silver badges58 bronze badges

Collectives™ on Stack Overflow

Jquery datatables - fnopen() detail table does not occupy full width

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related