How to change the width of a child row

[Deleted User]

Referencing to https://datatables.net/examples/api/row_details.html

I tried changing the width just by adding it into the html but it is not working this way:

return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px; width: 20%; ">'+ [...]

[Deleted User]

http://live.datatables.net/bihawepu/3550/edit?html,css,js,console,output

Here is an example. If you open the child row of Airi Satou it is way too long.

[Deleted User]

http://live.datatables.net/bihawepu/3554/edit

I gave the table an id and tried force breaking it but it is still not working. What am I missing?
The only (ugly) solution which I found is using overflow: auto;
But this will make it just scrollable to the right. I want new lines without scrolling.

colin

Your last example appears to work, or am I missing something? It would be better to set a class for the child table, as IDs need to be unique and you can two child rows open simultaneously, but it seems to limit the width as expected to me.

Colin

[Deleted User]

Hey colin,
Take a look at this:
http://live.datatables.net/bihawepu/3558/edit

Open up the child row of Airi Satou and take a look at the yellow borders and compare it with the borders of the other rows. The extension number of Airi Satou is a really long string which overflows the box. I want that long string to cut if it reaches the end of the width box and keep the other stuff in a new line.

colin

That'll be a standard CSS issue - this thread on SO sh0uld help

Colin