How to make table column's width only take necessary space with ellipsis overflow?
<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>