title: Fixed table layout with auto width
body: <p>According to spec, <strong>Fixed table layout</strong> won't work with <code>width</code> set to <code>auto</code>:</p>
  
  <blockquote>
    <p>17.5.2.1 Fixed table layout</p>
    
    <p>With this (fast) algorithm, the horizontal layout of the table does
    not depend on the contents of the cells; it only depends on the
    table's width, the width of the columns, and borders or cell spacing.</p>
    
    <p>The table's width may be specified explicitly with the 'width'
    property. A value of 'auto' (for both 'display: table' and 'display:
    inline-table') means use the <strong>automatic table layout</strong> algorithm.
    However, if the table is a block-level table ('display: table') in
    normal flow, a UA may (<strong>but does not have to</strong>) …</p>
  </blockquote>
  
  <p>Is there any hack to make it work anyway (using <strong>pure CSS</strong>)?</p>
  
  <p>What I have: <code>table-layout: fixed</code> takes no effect with <code>width: auto</code>:</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>table{
    /* those two won't work togheter */
    table-layout: fixed;
    width: auto;
  }
  
  td{
    /* pure visual purpose */
    border: 1px solid black;
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
   &lt;tr&gt;
    &lt;td&gt;Mid long text&lt;/td&gt;
    &lt;td&gt;The very longest text&lt;/td&gt;
    &lt;td&gt;Short&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I want to get: All table cells's width is set to the widest one:</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-js lang-js prettyprint-override"><code>// width of widest table cell (in px)
  var max = 0;
  
  // get width of widest table cell (in px)
  $('table td').each(function(){
   max = Math.max(max, $(this).width());
  });
  
  // set width of all cells to the width of widest one
  $('table td').each(function(){
   $(this).css('width', max +'px');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table{
    /* those two won't work togheter */
    table-layout: fixed;
    width: auto;
  }
  
  td{
    /* pure visual purpose */
    border: 1px solid black;
    padding: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table&gt;
   &lt;tr&gt;
    &lt;td&gt;Mid long text&lt;/td&gt;
    &lt;td&gt;The very longest text&lt;/td&gt;
    &lt;td&gt;Short&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>