title: How to make table column's width only take necessary space with ellipsis overflow?
body: <p>I would like my table to be 100% width, and for each column of the table to only take up the space it needs. If it overflows, then an ellipsis will appear.</p>
  
  <p><strong>Without Table-Layout: Fixed;</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
     margin: 0;
     padding: 0;
     font-family: sans-serif; */
  }
  
  .account-products-container .table {
     width: 100%;
     max-width: 100%;
     margin: 20px 0;
     border-collapse: collapse;
     border-spacing: 0;
     display: table;
     table-layout: auto;
  }
  
  .account-products-container .table-striped&gt;tbody&gt;tr:nth-of-type(odd) {
     background-color: #eee;
  }
  
  .account-products-container .table&gt;thead&gt;tr&gt;th {
     padding: 8px;
     line-height: 1.428571429;
     font-weight: 600;
     text-transform: uppercase;
     vertical-align: bottom;
     border-bottom: 1px solid #DDD;
     text-align: left;
  }
  
  .account-products-container .table&gt;tbody&gt;tr&gt;td {
     padding: 8px;
     line-height: 1.428571429;
     vertical-align: top;
     border-top: 1px solid #DDD;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="account-products-container"&gt;
    &lt;table class="table table-striped"&gt;
     &lt;thead&gt;
       &lt;tr&gt;
         &lt;th&gt;ID&lt;/th&gt;
         &lt;th&gt;Product&lt;/th&gt;
       &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
       &lt;tr&gt;
         &lt;td&gt;123456789&lt;/td&gt;
         &lt;td&gt;This is the name of a product that is long&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;td&gt;549490309&lt;/td&gt;
         &lt;td&gt;This is a product title that is even longer than the first one and longer than the second one because the second one is short, so of course it's longer.&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;td&gt;005948333&lt;/td&gt;
         &lt;td&gt;This one is short&lt;/td&gt;
       &lt;/tr&gt;
     &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is how I want the column's to look, but without <code>table-layout: fixed;</code>, the table overflows instead of resizing due to the <code>white-space: nowrap;</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/ECUMv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ECUMv.png" alt="enter image description here"></a></p>
  
  <p><strong>With Table-Layout: Fixed;</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
     margin: 0;
     padding: 0;
     font-family: sans-serif; */
  }
  
  .account-products-container .table {
     width: 100%;
     max-width: 100%;
     margin: 20px 0;
     border-collapse: collapse;
     border-spacing: 0;
     display: table;
     table-layout: fixed;
  }
  
  .account-products-container .table-striped&gt;tbody&gt;tr:nth-of-type(odd) {
     background-color: #eee;
  }
  
  .account-products-container .table&gt;thead&gt;tr&gt;th {
     padding: 8px;
     line-height: 1.428571429;
     font-weight: 600;
     text-transform: uppercase;
     vertical-align: bottom;
     border-bottom: 1px solid #DDD;
     text-align: left;
  }
  
  .account-products-container .table&gt;tbody&gt;tr&gt;td {
     padding: 8px;
     line-height: 1.428571429;
     vertical-align: top;
     border-top: 1px solid #DDD;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="account-products-container"&gt;
    &lt;table class="table table-striped"&gt;
     &lt;thead&gt;
       &lt;tr&gt;
         &lt;th&gt;ID&lt;/th&gt;
         &lt;th&gt;Product&lt;/th&gt;
       &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
       &lt;tr&gt;
         &lt;td&gt;123456789&lt;/td&gt;
         &lt;td&gt;This is the name of a product that is long&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;td&gt;549490309&lt;/td&gt;
         &lt;td&gt;This is a product title that is even longer than the first one and longer than the second one because the second one is short, so of course it's longer.&lt;/td&gt;
       &lt;/tr&gt;
       &lt;tr&gt;
         &lt;td&gt;005948333&lt;/td&gt;
         &lt;td&gt;This one is short&lt;/td&gt;
       &lt;/tr&gt;
     &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This responds well, and has the ellipsis, but my column's no longer take up the minimal space.</p>
  
  <p><a href="https://i.stack.imgur.com/JKYmM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JKYmM.png" alt="enter image description here"></a></p>
  
  <p>How can I make the column's only take up the space they need, while having my table respond well?</p>
  
  <p>If you want to play around with it: <a href="https://jsfiddle.net/b38vcwzL/1/" rel="noreferrer"><strong>JSFiddle</strong></a></p>