title: why does word wrap: break word break my table?
body: <p>i have attached a image of the issue</p>
  <p>My code is supposed to create a table using data from a object. that all works fine. however the issue is that if one of the tables elements is too long and has no spaces then it goes passed the tables border. i tried to fix this by adding &quot;style=&quot;word-wrap: break-word&quot;&quot; to the table elements that would include the address since that'll be the longest string. however this broke the table and it no longer appears anymore. I've tried to remove all the code that isn't necessary for simplicities sake.</p>
  <p>this code works perfectly without the style tag so i know that must be something to do with the problem.
  <a href="https://i.stack.imgur.com/sEYpC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sEYpC.jpg" alt="enter image description here" /></a></p>
  <pre><code>
  #tableside{
  width: 100%
  }
  
  table{
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
  width: 100%;
  }
  
  table, td, tr, th {
    border: 1px solid black;
  }
  
  th, tr {
    padding: 5px;
  }
  
  </code></pre>
  <pre><code>    &lt;div id=&quot;tableside&quot;&gt;
       
        &lt;div id=&quot;table&quot;&gt;
          &lt;table id=&quot;table1&quot;&gt;
  
          &lt;/table&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  
      var row = &quot;&lt;tr&gt;&lt;th&gt;First name&lt;/th&gt;&lt;th&gt;Last name&lt;/th&gt;&lt;th&gt;Number&lt;/th&gt;&lt;th&gt;Address&lt;/th&gt;&lt;/tr&gt;&quot;
      $(&quot;#table1&quot;).append(row)
      var contactListOriginall = addressLogLength()
      for (let i = 0; i &lt; contactListOriginall.length; i++) {
        let contactName = contactListOriginall[i]
        var firstname = getData(contactName)[0];
        var lastname = getData(contactName)[1]
        var number = getData(contactName)[2]
        var address = getData(contactName)[3]
        let row = &quot;&lt;tr id=contactName&gt;&lt;td&gt;&quot; + firstname + &quot;&lt;/td&gt;&lt;td&gt;&quot; + lastname + &quot;&lt;/td&gt;&lt;td&gt;&quot; + number + &quot;&lt;/td&gt;&lt;td style=&quot;word-wrap: break-word&quot;&gt;&quot; + address + &quot;&lt;/td&gt;&lt;/tr&gt;&quot;
        $(&quot;#table1&quot;).append(row)
      }
  
      function reload() {
        $(&quot;#table1 tr&quot;).remove()
        let row = &quot;&lt;tr&gt;&lt;th&gt;First name&lt;/th&gt;&lt;th&gt;Last name&lt;/th&gt;&lt;th&gt;Number&lt;/th&gt;&lt;th&gt;Address&lt;/th&gt;&lt;/tr&gt;&quot;
        $(&quot;#table1&quot;).append(row)
        var $search = $(&quot;#searching&quot;);
        var search = $search.val();
        let contactList = match(search)
        for (let c = 0; c &lt; contactList.length; c++) {
          let contactName = contactList[c]
          var firstname = getData(contactName)[0];
          var lastname = getData(contactName)[1]
          var number = getData(contactName)[2]
          var address = getData(contactName)[3]
          let row = &quot;&lt;tr id=contactName&gt;&lt;td&gt;&quot; + firstname + &quot;&lt;/td&gt;&lt;td&gt;&quot; + lastname + &quot;&lt;/td&gt;&lt;td&gt;&quot; + number + &quot;&lt;/td&gt;&lt;td style=&quot;word-wrap: break-word&quot;&gt;&quot; + address + &quot;&lt;/td&gt;&lt;/tr&gt;&quot;
          $(&quot;#table1&quot;).append(row)
        }
      }
      $(&quot;#searching&quot;).on(&quot;input&quot;, function() {
        reload()
      });
  
    &lt;/script&gt;
  &lt;/body&gt;
  
  </code></pre>