title: Unhide description with popup in my table (html text-overflow ellipsis)
body: <p>So, here is my sample code:</p>
  
  <p><a href="https://jsfiddle.net/L604s0rz/" rel="nofollow"><strong>JSFIDDLE</strong></a></p>
  
  <ol>
  <li>I would like to popup my hidden long description text correctly.
  I can unhide it, but why is the short description cell of my table is so un-fit?(like as border and width of my cell)<br><br></li>
  <li>I would like to line break my long popup description to 100px...</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 120%;
    table-layout: fixed;
  }
  td {
    font-family: Arial, sans-serif;
    font-size: 14px;
    padding: 10px 5px;
    overflow: hidden;
    word-break: normal;
  }
  .main-header {
    border-style: solid;
    border-width: 2px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
  .header {
    border-style: solid;
    border-width: 2px;
    text-align: center;
    font-weight: bold;
  }
  .name {
    border-style: solid;
    border-width: 1px;
    text-align: center;
  }
  .description {
    border-style: solid;
    border-width: 1px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    position: relative;
    width: 100%;
  }
  .description:hover {
    z-index: 1;
    width: auto;
    background-color: #000000;
    color: #ffffff;
  }
  .qt {
    border-style: solid;
    border-width: 1px;
    text-align: right;
  }
  .price {
    border-style: solid;
    border-width: 1px;
    text-align: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table"&gt;
    &lt;tr&gt;
      &lt;th class="main-header" colspan="4"&gt;Test Main Header&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="header"&gt;Name&lt;/td&gt;
      &lt;td class="header"&gt;Description&lt;/td&gt;
      &lt;td class="header"&gt;qt&lt;/td&gt;
      &lt;td class="header"&gt;Price&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="name"&gt;Test product name&lt;/td&gt;
      &lt;td class="description"&gt;Test long description lféjksdéflé lksajdf sadlkjlék sadflkjasd lfljkjlkjléas dflk&lt;/td&gt;
      &lt;td class="qt"&gt;22 pcs&lt;/td&gt;
      &lt;td class="price"&gt;$370&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>