title: How can I create scrollable HTML table colums with CSS?
body: <p>I'd like my HTML table to scroll a column as a whole, keeping all cells in alignment to each other.</p>
  
  <p>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.</p>
  
  <p>How can this be done with CSS alone, without making use of absolute lengths?</p>
  
  <p><br/></p>
  
  <h3>Here's my - non working - sample code:</h3>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;colgroup&gt;
      &lt;col class="left" /&gt;
      &lt;col class="middle" /&gt;
      &lt;col class="right" /&gt;
    &lt;/colgroup&gt;
    &lt;tbody&gt;
  
      &lt;tr&gt;
        &lt;td class="left"&gt;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.&lt;/td&gt;
        &lt;td class="middle"&gt;&amp;lt;&amp;nbsp;&amp;gt;&lt;/td&gt;
        &lt;td class="right"&gt;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.&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td class="left"&gt;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.&lt;/td&gt;
        &lt;td class="middle"&gt;&amp;lt;&amp;nbsp;&amp;gt;&lt;/td&gt;
        &lt;td class="right"&gt;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&lt;br/&gt;sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore&lt;br/&gt;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.&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td class="left"&gt;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.&lt;/td&gt;
        &lt;td class="middle"&gt;&amp;lt;&amp;nbsp;&amp;gt;&lt;/td&gt;
        &lt;td class="right"&gt;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.&lt;/td&gt;
      &lt;/tr&gt;
  
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>