固定大小和文字环绕的HTML表格

Question

我正在尝试制作一个不会超出其DIV范围的html表，如果列的文本太大，它将换行到下一行。

我已经添加了word-wrap:break-word;，但不知何故。如您在下图中所看到的，列文本行超出了列范围，甚至DIV超出了表格本身。我在做什么错了？

完成小提琴：

https://jsfiddle.net/keq63ygw/

Answer 1

删除空格并添加word-break：break-word。它的工作

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

Answer 2

删除

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

代码部分

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