Table is using more than 100% width of its parent element, how can this be fixed by CSS only?

Question

I have a root div using 100% width and I want all children not to overlap (overflow:hidden) and also not to use more width than this 100%.

This works fine when I work with inner <div>s, but if <table>s are used, the table gets too wide, using more than the parent 100% div.

How can this be fixed while keeping the table?

Here is the JSFiddle.

Screenshot:

Answer 1

You should give word-break: break-word; for td text , because the text is a large length, or you can give td text as word-break: break-all; for breaking the text.

updated css code

#wrapper table td{
  word-break: break-word;
}

demo fiddle: https://jsfiddle.net/nikhilvkd/kLt1mec8/3/