title: Have table cell grow horizontally when cell content is large
body: <p>I have a table within a wrapper div that is set to scroll on overflow (i.e., <code>overflow: auto;</code>).</p>
  <p>This works nicely when placed in a container div that has a fixed width. If my table (which is being built server side) happens to have a lot of columns and gets too wide, gets a scroll bar placed at the bottom, making it semi-mobile friendly.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;wrapper&quot;&gt;
      &lt;table&gt;
        &lt;!-- more html here... --&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.container {
    width: 350px;
  }
  
  .wrapper {
    width: 100%;
    overflow: auto;
  }
  
  table {
    width: 100%;
  }
  </code></pre>
  <p>However, when I have a cell which contains a lot of text, the cell will typically grow in height to fit the content.</p>
  <p>Since I'm using a scrolling overflow, I'd like for the cell to tend to grow more in width, which would give it a better visual appeal.</p>
  <p>Here are some examples:</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>.container {
    width: 350px;
  }
  
  .wrapper {
    width: 100%;
    overflow: auto;
  }
  
  table {
    width: 100%;
  }
  
  /* Manual fix for cell with lots of text */
  .manual-fix {
    width: 400px;
  }
  
  /* minor display stuff */
  
  hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
  }
  
  h1 {
    font-size: 1.2em;
  }
  
  h2 {
    font-size: 0.9em;
    font-weight: normal;
    font-style: italic;
  }
  
  table tr td {
    border: 1px solid grey;
    padding: 0.5em;
  }
  
  table tr th {
    background-color: grey;
    color: white;
    padding: 0.3em;
  }
  
  body {
    font-family: sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;
  Table within a wrapper so it overflows nicely and you can scroll.
  &lt;/h1&gt;
  &lt;div class="container"&gt;
    &lt;div class="wrapper"&gt;
  
      &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;1&lt;/th&gt;
            &lt;th&gt;2&lt;/th&gt;
            &lt;th&gt;3&lt;/th&gt;
            &lt;th&gt;4&lt;/th&gt;
            &lt;th&gt;5&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;lorem&lt;/td&gt;
            &lt;td&gt;ipsum&lt;/td&gt;
            &lt;td&gt;dolorcing&lt;/td&gt;
            &lt;td&gt;sit&lt;/td&gt;
            &lt;td&gt;amet&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;ipsum&lt;/td&gt;
            &lt;td&gt;dolorcing&lt;/td&gt;
            &lt;td&gt;sit&lt;/td&gt;
            &lt;td&gt;amet&lt;/td&gt;
            &lt;td&gt;lorem&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;dolorcing&lt;/td&gt;
            &lt;td&gt;sit&lt;/td&gt;
            &lt;td&gt;amet&lt;/td&gt;
            &lt;td&gt;lorem&lt;/td&gt;
            &lt;td&gt;ipsum&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;h1&gt;
  Table still within a wrapper yet coincidentally fits without the need for a scrolling overflow.
  &lt;/h1&gt;
  
  &lt;h2&gt;
  This is only because it has a small number of columns.
  &lt;/h2&gt;
  &lt;div class="container"&gt;
    &lt;div class="wrapper"&gt;
  
      &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;1&lt;/th&gt;
            &lt;th&gt;2&lt;/th&gt;
            &lt;th&gt;3&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;lorem&lt;/td&gt;
            &lt;td&gt;ipsum&lt;/td&gt;
            &lt;td&gt;dolorcing&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;ipsum&lt;/td&gt;
            &lt;td&gt;dolorcing&lt;/td&gt;
            &lt;td&gt;sit&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;dolorcing&lt;/td&gt;
            &lt;td&gt;sit&lt;/td&gt;
            &lt;td&gt;amet&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;hr&gt;
  
  &lt;h1&gt;
  Table that still overflows, but wraps long text poorly.
  &lt;/h1&gt;
  &lt;div class="container"&gt;
    &lt;div class="wrapper"&gt;
  
      &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;1&lt;/th&gt;
            &lt;th&gt;2&lt;/th&gt;
            &lt;th&gt;3&lt;/th&gt;
            &lt;th&gt;4&lt;/th&gt;
            &lt;th&gt;5&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;lorem&lt;/td&gt;
            &lt;td&gt;ipsum&lt;/td&gt;
            &lt;td&gt;dolorcing&lt;/td&gt;
            &lt;td&gt;sit&lt;/td&gt;
            &lt;td&gt;amet&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;ipsum&lt;/td&gt;
            &lt;td&gt;dolorcing&lt;/td&gt;
            &lt;td&gt;sit&lt;/td&gt;
            &lt;td&gt;amet&lt;/td&gt;
            &lt;td&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;dolorcing&lt;/td&gt;
            &lt;td&gt;sit&lt;/td&gt;
            &lt;td&gt;amet&lt;/td&gt;
            &lt;td&gt;lorem&lt;/td&gt;
            &lt;td&gt;ipsum&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;h1&gt;
  Table with a "manual fix" in place what I'd like to automatically happen when a cell has a lot of text in it.
  &lt;/h1&gt;
  &lt;h2&gt;
  Essentially, I'd like for a cell to have a max height, and increase its width when it reaches that max height so the content doesn't overflow.
  &lt;/h2&gt;
  &lt;div class="container"&gt;
    &lt;div class="wrapper"&gt;
  
      &lt;table&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;1&lt;/th&gt;
            &lt;th&gt;2&lt;/th&gt;
            &lt;th&gt;3&lt;/th&gt;
            &lt;th&gt;4&lt;/th&gt;
            &lt;th&gt;5&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;lorem&lt;/td&gt;
            &lt;td&gt;ipsum&lt;/td&gt;
            &lt;td&gt;dolorcing&lt;/td&gt;
            &lt;td&gt;sit&lt;/td&gt;
            &lt;td&gt;amet&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;ipsum&lt;/td&gt;
            &lt;td&gt;dolorcing&lt;/td&gt;
            &lt;td&gt;sit&lt;/td&gt;
            &lt;td&gt;amet&lt;/td&gt;
            &lt;td&gt;&lt;div class="manual-fix"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;dolorcing&lt;/td&gt;
            &lt;td&gt;sit&lt;/td&gt;
            &lt;td&gt;amet&lt;/td&gt;
            &lt;td&gt;lorem&lt;/td&gt;
            &lt;td&gt;ipsum&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>At the bottom example, I've manually expanded the width of a cell with large amounts of text to show what I'd like to happen (without the manual fix, of course).</p>
  <p><strong>Essentially</strong>, what I'm looking for is when a cell has a lot of text, for that cell to have a maximum height, and for the cell to expand horizontally (rather than vertically) to fit the content.</p>