You will need to add table-layout: fixed; to the table:

table {width:100%; table-layout: fixed;}
table td {word-wrap:break-word;}

<table>
   <thead>
      <tr>
         <th>very long word</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>ablkasd/123123123/agsdfasdf/asdfasdfasdf/_sdfsdfsdf{123123-14werwwer-14124124-wefweshtsdf-235232323}/3235235/dasasdfasdfasdf.bsfs</td>
      </tr>
   </tbody>
</table>

You can make the words (long strings) break with word-break: break-word; in addition to your word-wrap like this:

h2 {
  word-wrap: break-word;
  word-break: break-word;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="panel panel-default">
    <div class="panel-heading">test </div>
    <div class="panel-body">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Sex</th>
            <th></th>
          </tr> 
        </thead>  
        <tbody>     
          <tr >   
            <td>ff</td>
            <td>wer</td>
            <td>1</td>
            <td>asdf</td>
          </tr>     
          <tr class="">
            <td colspan="4">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-lg-6 col-md-6 col-xs-12"><h2>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</h2>
                  </div>
                  <div class="col-lg-6 col-md-6 col-xs-12"><h2>22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</h2>
                    <hr>
                  </div>
                </div>
                <div class="row"><h2>33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</h2>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

This will also work on other elements like divs, spans etc.

What's the difference between word-wrap and word-break?

word-wrap: The word-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.

word-break: The word-break CSS property is used to specify how (or if) to break lines within words

In conclusion you need them both to break long strings without any spaces where the word-wrap could take in place.

table-layout: fixed will get force the cells to fit the table (and not the other way around), e.g.:

<table style="border: 1px solid black; width: 100%; word-wrap:break-word;
              table-layout: fixed;">
  <tr>
    <td>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    </td>
  </tr>
</table>

Try the following:

Copyword-wrap: break-word;
white-space: normal;

word-wrap is css3 (however it works in IE). You might not be able to get it working in older browsers however.

The following works for me in Internet Explorer. Note the addition of the table-layout:fixed CSS attribute

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
    </td>
    <td>Short word</td>
  </tr>
</table>

Add the following code to your td's CSS style table.tableSection th, table.tableSection td { ... }

word-break: break-all;

Here is the updated fiddle: https://jsfiddle.net/bmc7r8rz/8/

Your property is incorrect. You appear to be trying to use an old Microsoft CSS property that is since removed.

The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias. - MDN

The comparable modern property would either be overflow-wrap: anywhere or word-break: break-word. I'm not familiar enough with the differences between the two, but MDN has a nice breakdown of the related properties (scroll to "Result" to see it in action).