Resize an HTML Table Forcing All Columns to Stay in View

Question

I'm looking for a simple solution to having a table be able to shrink horizontally while keeping all of the columns in view. As the columns shrink the content inside of them should become horizontally scrollable.

Example problem:

http://codepen.io/kirkouimet/pen/jybbxK

Assumptions and goals:

We will not know how many columns there will be
The columns will always stay on one line (CSS white-space: nowrap)
Ideally the solution does not involve JavaScript, just CSS
It would be awesome if the text inside of the table ellipsed (...) and then when you hovered over it, it expanded and you could scroll it horizontally

Code from the Codepen link:

HTML

<table>
    <thead>
        <th>First First First</th>
        <th>Second Second Second</th>
        <th>Third Third Third</th>
        <th>Fourth Fourth Fourth</th>
    </thead>
    <tr>
        <td>First First First</td>
        <td>Second Second Second</td>
        <td>Third Third Third</td>
        <td>Fourth Fourth Fourth</td>
    </tr>
    <tr>
        <td>First First First</td>
        <td>Second Second Second</td>
        <td>Third Third Third</td>
        <td>Fourth Fourth Fourth</td>
    </tr>
    <tr>
        <td>First First First</td>
        <td>Second Second Second</td>
        <td>Third Third Third</td>
        <td>Fourth Fourth Fourth</td>
    </tr>
</table>

CSS

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid #ccc;
    white-space: nowrap;
}

http://stackoverflow.com/a/36766603/367865 – Ouroborus Jan 08 '17 at 23:52 — Ouroborus, Jan 08 '17 at 23:52

Brett DeWoody · Accepted Answer · 2017-01-09T08:34:55.953

The following CSS changes will:

Keep the text in each cell on a single line
Show an ellipsis when the content of a cell is wider than the cell
When hovered, the ellipsis will disappear and the content becomes scrollable

The important CSS properties are:

table {
  width: 100%;
  table-layout: fixed;
}

th, td {
  white-space: nowrap;
  overflow-x: scroll;
  text-overflow: ellipsis;
}

th:hover,
td:hover {
  text-overflow: clip;
}

Here's an example, though the layout of SO doesn't showcase the scrolling feature due to the width. For a working example, see this Codepen demo and resize your screen until the table cells become too narrow to show the content.

table {
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}
th,
td {
  border: 1px solid #ccc;
  white-space: nowrap;
  overflow-x: scroll;
  text-overflow: ellipsis;
}
th:hover,
td:hover {
  text-overflow: clip;
}

<table>
  <thead>
    <th>First First First First First</th>
    <th>Second Second Second Second Second</th>
    <th>Third Third Third Third Third</th>
    <th>Fourth Fourth Fourth Fourth Fourth</th>
  </thead>
  <tr>
    <td>First First First First</td>
    <td>Second Second Second Second</td>
    <td>Third Third Third Third Third</td>
    <td>Fourth Fourth Fourth</td>
  </tr>
  <tr>
    <td>First First First First</td>
    <td>Second Second Second Second</td>
    <td>Third Third Third Third Third</td>
    <td>Fourth Fourth Fourth</td>
  </tr>
  <tr>
    <td>First First First First</td>
    <td>Second Second Second Second</td>
    <td>Third Third Third Third Third</td>
    <td>Fourth Fourth Fourth</td>
  </tr>
</table>

Nice answer. Maybe use overflow-x instead of just overflow to get rid of those extra arrows. — Dominofoe, Jan 09 '17 at 01:19

zer00ne · Answer 2 · 2017-01-09T01:11:38.753

UPDATE

Added ellipsis to the cell with red text. Click it to read more and click it again to retract back.

For the retracting ellipsis I used 2 :targets.

Scrollable, I missed that the first read, ok that's more realistic. Designed for four columns, it would be ridiculous to expect a multitude of columns given the constraints. If I have more time I'll add ellipsis, but for now, just small shrinking font will have to do. Scrolling horizontal cells are done by using overflow:scroll/auto on the <td> and append a <div> inside each <td>

Relevant CSS

table {
  width: 98vw;
  height: auto;
  min-height: 200px;
  table-layout: fixed;
}
th,
td {
  font-size: .4em;
  max-width:19%;
  overflow-y:hidden;
  overflow-x:scroll;
}

SNIPPET

table {
  border-collapse: collapse;
  width: 96vw;
  height: auto;
  min-height: 200px;
  table-layout: fixed;
  border: 1px solid #ccc;
}
th,
td {
  border: 1px solid #ccc;
  white-space: nowrap;
  font-size: .4em;
  min-width: 19%;
}
td {
  overflow-x: scroll;
  overflow-y: hidden;
}
td div {
  min-height: 30px;
}
.ell {
  display: block;
  position: relative;
  outline: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  width: 100%;
  color: red;
}
.ell::after {
  content: '&#hellip;';
  color: transparent;
  padding: 5px 0 5px 5px;
}
#ex1:target {
  min-width: 250ch;
  transition: all 1s;
  text-overflow: visible;
  overflow-x: visible;
  position: relative;
  z-index: 1;
  display: block;
  border-bottom: 0 none transparent;
}
a {
  display: block;
  height: 10px;
  width: 100%;
}
.in {
  display: none;
}
#ex1:target .ex {
  display: none;
}
#ex1:target .in {
  display: block;
  height: 30px;
}

<table>
  <thead>
    <th>First First First</th>
    <th>Second Second Second</th>
    <th>Third Third Third</th>
    <th>Fourth Fourth Fourth</th>
  </thead>
  <tbody>
    <tr>
      <td>
        <div>First First First</div>
      </td>
      <td>
        <div>Second Second Second</div>
      </td>
      <td>
        <div>START Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
          Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
          Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
          Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
          Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third
          Third Third Third Third Third Third Third Third Third Third Third Third END</div>
      </td>
      <td>
        <div>Fourth Fourth Fourth</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>First First First</div>
      </td>
      <td>
        <div>START Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second
          Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second
          Second Second Second Second Second Second END</div>
      </td>
      <td>
        <div>Third Third Third</div>
      </td>
      <td>
        <div>Fourth Fourth Fourth</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>First First First</div>
      </td>

      <td id='ex1'>
        <div class='ell'>
          <a href='#ex1' class='ex'></a>
          <a href='#in1' class='in'></a>
          Second Second SecondSecond Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second Second
        </div>
      </td>
      <td>
        <div>Third Third Third</div>
      </td>
      <td>
        <div>
          <p>Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth Fourth</p>
        </div>
      </td>

    </tr>
  </tbody>
</table>

Resize an HTML Table Forcing All Columns to Stay in View

2 Answers2