How can I create scrollable HTML table colums with CSS?

Question

I'd like my HTML table to scroll a column as a whole, keeping all cells in alignment to each other.

The result of the following example should be two horizontal scroll bars at the bottom of the table: One at the bottom of column #1 and a second one at the bottom of column #3, scrolling all the cells above the corresponding scroll bar simultaneously.

How can this be done with CSS alone, without making use of absolute lengths?

Here's my - non working - sample code:

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

col.left,
col.right {
  overflow-x: auto;
}

td {
  white-space: nowrap;
  border-bottom: 1px solid silver;
}

td.left,
td.right {
  min-height: 5em;
}

td.middle {
  width: 2em;
  text-align: center;
}

<table>
  <colgroup>
    <col class="left" />
    <col class="middle" />
    <col class="right" />
  </colgroup>
  <tbody>

    <tr>
      <td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
      <td class="middle">&lt;&nbsp;&gt;</td>
      <td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>

    <tr>
      <td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
      <td class="middle">&lt;&nbsp;&gt;</td>
      <td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd, no sea takimata<br/>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore<br/>et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>

    <tr>
      <td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
      <td class="middle">&lt;&nbsp;&gt;</td>
      <td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd, no sea takimata
        sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
        ea rebum. Stet clita kasd gubergren, no sea sanctus est Lorem ipsum dolor sit amet.</td>
    </tr>

  </tbody>
</table>

Answer 1

This is the closest thing I could come up with - it puts the scrollable columns in a tbody element and the fixed columns in a thead element and exploits the ability to enable scrolling of the table body independently of the header. Unfortunately I think you still need to specify the width of the scrollable column in order to get overflow-x: scroll to work.

table thead, table tbody {
    display: inline-block;
}

table tbody {
    width: 200px;
    overflow-x: scroll;
    white-space: nowrap;
}

<table>
    <tbody>
        <tr>
            <td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo dua kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
        </tr>
        <tr>
            <td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo dua kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <td class="middle">&lt;&nbsp;&gt;</td>
        </tr>
        <tr>
            <td class="middle">&lt;&nbsp;&gt;</td>
        </tr>
    </thead>
    <tbody valign="top">
        <tr>
            <td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo dua kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
        </tr>
        <tr>
            <td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo dua kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
        </tr>
    </tbody>
</table>