Have Table Cell Grow Horizontally When Cell Content Is Large

I have a table within a wrapper div that is set to scroll on overflow (i.e., overflow: auto;). This works nicely when placed in a container div that has a fixed width. If my table

Solution 1:

You can wrap the cell contents inside a non-tabular container with

width: max-content;     /* Attempt to have maximum width required by content */
max-width: 400px;       /* without exceeding 400px */
min-width: min-content; /* unless the content really requires it (optional) */

In the future, it will be possible to write this as

width: fit-content(400px);

Note not all browsers support max-content or min-content, and others need vendor prefixes.

.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;
}

td > div {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 400px;
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
}

<h1>
  Table within a wrapper so it overflows nicely and you can scroll.
</h1>
<div class="container">
  <div class="wrapper">
    <table>
      <thead>
        <tr>
          <th><div>1</div></th>
          <th><div>2</div></th>
          <th><div>3</div></th>
          <th><div><div>4</div></th>
          <th>5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><div>lorem</div></td>
          <td><div>ipsum</div></td>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
          <td><div>amet</div></td>
        </tr>
        <tr>
          <td><div>ipsum</div></td>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
          <td><div>amet</div></td>
          <td><div>lorem</div></td>
        </tr>
        <tr>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
          <td><div>amet</div></td>
          <td><div>lorem</div></td>
          <td><div>ipsum</div></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<h1>
  Table still within a wrapper yet coincidentally fits without the need for a scrolling overflow.
</h1>

<h2>
  This is only because it has a small number of columns.
</h2>
<div class="container">
  <div class="wrapper">
    <table>
      <thead>
        <tr>
          <th><div>1</div></th>
          <th><div>2</div></th>
          <th><div>3</div></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><div>lorem</div></td>
          <td><div>ipsum</div></td>
          <td><div>dolorcing</div></td>
        </tr>
        <tr>
          <td><div>ipsum</div></td>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
        </tr>
        <tr>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
          <td><div>amet</div></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<hr>

<h1>
  Table that still overflows, and wraps long text nicely.
</h1>
<div class="container">
  <div class="wrapper">
    <table>
      <thead>
        <tr>
          <th><div>1</div></th>
          <th><div>2</div></th>
          <th><div>3</div></th>
          <th><div>4</div></th>
          <th><div>5</div></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><div>lorem</div></td>
          <td><div>ipsum</div></td>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
          <td><div>amet</div></td>
        </tr>
        <tr>
          <td><div>ipsum</div></td>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
          <td><div>amet</div></td>
          <td><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></td>
        </tr>
        <tr>
          <td><div>dolorcing</div></td>
          <td><div>sit</div></td>
          <td><div>amet</div></td>
          <td><div>lorem</div></td>
          <td><div>ipsum</div></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Solution 2:

Cell column won't grow wider on fixed width table. Give wrapper a lot of space for table to grow. Then with javascript (I use jQuery), adjust wrapper width to fit table's width.

CSS

.container {
   width: 350px;
   overflow:auto;
}

.wrapper {
  width: 10000px;
}

table { 
}
table td:nth-child(5) {
  max-width:400px;
}

jQuery

$(document).ready(function() {
  $('table').each(function() {
    $(this).closest('.wrapper').width($(this).outerWidth());
  })
})

Here's the fiddle.

Solution 3:

Add position:relative; to .container class

Please find the working example here. Pen