title: Scale table column by maximum text content
body: <p>I want to make my table columns to scale by text content of the max-length row in a column, like this:</p>
  <p><a href="https://i.stack.imgur.com/Ez1BG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ez1BG.png" alt="enter image description here" /></a></p>
  <p>The problem is that I have used flex for this, and changed the order of <code>tr</code>, <code>th</code>, <code>td</code>, <code>table</code> tags:</p>
  <p>Css file:</p>
  <pre><code>.table {
    display: flex;
    width: 100%;
    table-layout: fixed;
  }
  
  .tr {
    display: flex;
    flex-direction: column;
    border: 1px solid black;
  }
  
  .td {
    border: 1px solid red;
  }
  </code></pre>
  <p>React file:</p>
  <pre><code>import React from 'react';
  
  import styles from './App.module.scss';
  
  function App() {
    return (
      &lt;table className={styles.table}&gt;
        &lt;tr className={styles.tr}&gt;
          &lt;th className={styles.td}&gt;Company&lt;/th&gt;
          &lt;td className={styles.td}&gt; Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste Alfreds Futterkiste&lt;/td&gt;
          &lt;td className={styles.td}&gt;Centro comercial Moctezuma&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr className={styles.tr}&gt;
          &lt;th className={styles.td}&gt;Contact&lt;/th&gt;
          &lt;td className={styles.td}&gt;Maria Anders&lt;/td&gt;
          &lt;td className={styles.td}&gt;Francisco Chang&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr className={styles.tr}&gt;
          &lt;th className={styles.td}&gt;Country&lt;/th&gt;
          &lt;td className={styles.td}&gt;Mexico&lt;/td&gt;
          &lt;td className={styles.td}&gt;UK&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Is there way to implement same functionality, but without destroying converntional table structure (I am concerned it may afffect accessibility).</p>