0

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>

Improve this question
5
  • 1
    This smells a bit like an XY problem. Why do you want to scroll just the content within single columns? And what kind of content/data are you trying to display? Commented Dec 20, 2017 at 18:52
  • i really think this is not possible with html table, you should try another way to do it maybe with divs and display flex or creating your own grid system that works like that Commented Dec 20, 2017 at 19:12
  • Can't be done with pure css while keeping the horizontal lines equal while content varies. Colgroups are the worst but it would neither work on rows. I even tested grid + some crazy css properties that only work in firefox but firefox didn't fall for my tricks. Luckily it's not too hard in JS. Commented Dec 20, 2017 at 19:15
  • Note that <col> and <meta> do not use or need a closing slash. Commented Dec 20, 2017 at 19:29
  • Doesn't this go against the reason for using <table>? I would think you'd have far more work to do to make the other rows and columns not work against this attempt. Commented Dec 20, 2017 at 19:31

1 Answer 1

Reset to default
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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Very nice! .. Unfortunately it fails when adjacent cells have different heights. And it wraps when the display area becomes smaller than the table width. I amended my example new with a line containing line breaks in one column to further demonstrate the requirement.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.