Question

I am using Datatables.net and I am running into an issue where they table appears to be going past the constraints of the blocks its contained within. Acting similar to a floating element. I am not really sure how to address this issue as I am not really sure exactly whats going on.

More times then less my tables will stay within the confines of my template and push the template with it where needed, except this table. Example of what I mean

Answer 1

You can control whether the containing element shows the over-sized data table by using the CSS property “overflow”. If you set overflow:hidden, the table will be truncated, whereas if you set overflow:scroll the containing element will get a scroll bar which you can use to see the whole table (by scrolling around it).

However, I’m guessing you want to prevent the overflow, in which case your problem comes down to the data table’s width and its container’s width. If your data table’s content is simply too big, then you need to use the data table options to adjust the content (for instance, you might want to change your aoColumnDefs to have shorter header text). If the table’s contents are what you want, but you want to make the table smaller, then you’ll need to play with the CSS for it (ie. you may want to lower the font size).

Finally, if the data table is a fine size, and your problem is just that the containing element is too small, you need to increase the width (via the CSS properties width or min-width) of that containing element.

Hope that helps.