Responsive datatable child table row is not responsive (bootstrap theme)

helloworld123

Referring to the page about responsive datatable at page http://datatables.net/extensions/responsive/examples/styling/bootstrap.html,
I found out that the child row content is actually not responsive. For example, when the child table row(position row) has longer length than the child table header in small screen size, the table width will expand to accommodate the width of the child table, which results in horizontal scrollbar of the table.

I would like to know how to tweak this so that the child row width fit the width of the table header

For a better description, kindly refer to the image posted below. Note on the row senior software developer does not auto fit the screen size and horizontal scrollbar appear
http://s17.postimg.org/jozpdyp99/after.png

yager

after a lot of searching i found that i simply had to add some css to the page:
table.dataTable th, table.dataTable td { white-space: normal; }