title: I can't adjust width of table cell
body: <p>I have a strange problem. I want to have fixed width of table cell with break-word property when the word inside the cell is too long. Breaking work is working but the width of cell is still bigger than I specified. Here is the table with stylesheet:<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table style="table-layout: fixed"&gt;
    &lt;thead&gt;
      &lt;th style="width: 100px;"&gt;&lt;span&gt;EMAIL&lt;/span&gt;
      &lt;/th&gt;
      &lt;th style="width: 100px;"&gt;&lt;span&gt;FULL NAME&lt;/span&gt;
      &lt;/th&gt;
      &lt;th style="width: 100px;"&gt;&lt;span&gt;ORGANIZATION NAME&lt;/span&gt;
      &lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;td style="width: 100px;"&gt;
        &lt;div style="max-width: 100px; word-wrap: break-word; "&gt;
          abc
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td style="width: 100px;"&gt;
        &lt;div style="max-width: 100px; word-wrap: break-word; "&gt;
          efg
        &lt;/div&gt;
      &lt;/td&gt;
      &lt;td style="width: 100px;"&gt;
        &lt;div style="max-width: 100px; word-wrap: break-word; "&gt;
          lalalalallalalalalallalalalalalallalalalalallalalalalalalalallalalalla
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am getting the result:</p>
  
  <p><img src="https://i.stack.imgur.com/jBW8B.png" alt="enter image description here"></p>
  
  <p>and I would like to the email column to have width = 100px.</p>
  
  <p>Thanks for any help. I have no idea how to change it. </p>