Html table with fixed size and text wrapping

Question

I'm trying to do a html table that won't go outside its DIV and if the text of a column is too big, it would wrap to the next line.

I already added word-wrap:break-word; but somehow is not working. As you can see in the image below, the column text is going outside the column and even the DIV outside the table itself. What am i doing wrong ?

Complete fiddle :

https://jsfiddle.net/keq63ygw/

Answer 1

Remove white-space and add word-break:break-word. Its working

table.gridtable th, td {
  /* white-space: nowrap; */
  word-break: break-word;
}

Answer 2

remove

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

section from code

https://jsfiddle.net/keq63ygw/1/