title: Using flexbox on table header <th> elements
body: <p>I have a scenario which requires a complex layout within table header <code>&lt;th&gt;</code> elements. I want to approach the problem by making the <code>&lt;th&gt;</code> elements a flex container. </p>
  
  <p>However, if I start with this minimal example</p>
  
  <p><a href="https://i.stack.imgur.com/7ifSK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7ifSK.png" alt="enter image description here"></a></p>
  
  <p>and change the <code>&lt;th&gt;</code> elements to <code>display: inline-flex</code>, the table becomes:</p>
  
  <p><a href="https://i.stack.imgur.com/zjtgg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zjtgg.png" alt="enter image description here"></a></p>
  
  <p>I.e., the column width of the header no longer matches the column width of the <code>&lt;td&gt;</code> elements.</p>
  
  <p>How can I make use of flexbox inside the header without messing up column rendering?</p>
  
  <p><strong>Edit to clarify the use case</strong>: My <code>&lt;th&gt;</code> elements will eventually contain multiple elements, with left+right alignment (similar to <a href="https://stackoverflow.com/questions/2089820/right-align-and-left-align-text-in-same-html-table-cell">this question</a>). In addition I want to be able to control the stretch behavior (that's why flexbox instead of just floats).</p>
  
  <hr>
  
  <p>Example <a href="https://jsfiddle.net/bluenote10/ga1suj9y/10/" rel="nofollow noreferrer">jsfiddle</a>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class="column-header"&gt;A&lt;/th&gt;
        &lt;th class="column-header"&gt;B&lt;/th&gt;
        &lt;th class="column-header"&gt;C&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Something&lt;/td&gt;
        &lt;td&gt;Something&lt;/td&gt;
        &lt;td&gt;Something&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>table, th, td {
    border: 1px solid #000;
  }
  
  .column-header {
    display: inline-flex;
  }
  </code></pre>