How does one get columns not flow off the container using bootstrap and responsive?

NYPD

I can't seem to get Responsive to work properly using bootstrap. Some of the columns still get cut off the screen a little bit.

When I looked at the main site here:
https://datatables.net/extensions/responsive/examples/styling/bootstrap.html
all the columns neatly and properly hide or appear depending on screen resizing.

I could just be nitpicking, but here is the quick jsFiddle I made: http://jsfiddle.net/hdnquzk4/3/
You can see when resizing, the columns go off the screen and then become hidden after a bit

NYPD

Ok, got it working the way I wanted, but with a really weird solution. It seems like i forgot the extra css allan added:

table.dataTable th,table.dataTable td {
white-space: nowrap;
}

However, that does not get the table to respond nicely on browser re-size. The solution I found while debugging this was first enable nowrap on the th's and td's and then immediately remove that css style using jQuery.

Very strange, but here is an updated jsFiddle to show the solution: http://jsfiddle.net/hdnquzk4/4/

I have to be doing something wrong, I even tried firefox and chrome and experience the same weird issue. Idk, if you guys see anything wrong let me know.