title: Group several table columns and overflow to left
body: <p>I want to display a kind of competitions results table. Each row has a participant name, followed by several cells representing participant results in last competitions (say, the competitions take place once per week). Something like this:</p>
  <pre><code>User name    Aug 1   Aug 8   Aug 15
  John Doe       1       10     100
  Jane Doe      100      10      1
  </code></pre>
  <p>The table may become very wide if many columns are present. In such a case, I want the oldest columns to be hidden, so that only a few most recent are visible, and the table does not overflow the available space. The user name columns should always be visible.</p>
  <p>The &quot;borderline&quot; cells can be &quot;cut&quot; like this:</p>
  <pre><code>User name    g 1   Aug 8   Aug 15
  John Doe     1       10     100
  Jane Doe     00      10      1
  </code></pre>
  <p>...or they can be completely invisible, both variants are acceptable to me.</p>
  <p><strong>It is possible to achieve this with pure css?</strong></p>
  <hr />
  <p>For just one line, I've achieved it without a <code>table</code>, using <code>display: flex</code> together with <code>direction: rtl</code> for the 'columns' only:</p>
  <p><a href="https://jsfiddle.net/fo2Ldk3n/" rel="nofollow noreferrer">https://jsfiddle.net/fo2Ldk3n/</a></p>
  <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>.outer {
    width: 350px;
    display: flex;
    justify-content: flex-right;
    border: 1px solid black;
  }
  
  .header {
    white-space: nowrap;
    margin-right: 10px;
  }
  
  .line-box {
    direction: rtl;
    overflow: hidden;
    white-space: nowrap;
  }
  
  .line {
    padding-right: 10px;
    display: inline;
    white-space: nowrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
    &lt;div class="header"&gt;
      User Name
    &lt;/div&gt;
    &lt;div class="line-box"&gt;
      &lt;div class="line"&gt;
        2223 +1
      &lt;/div&gt;
      &lt;div class="line"&gt;
        10
      &lt;/div&gt;
      &lt;div class="line"&gt;
        100
      &lt;/div&gt;
      &lt;div class="line"&gt;
        1
      &lt;/div&gt;
      &lt;div class="line"&gt;
        10
      &lt;/div&gt;
      &lt;div class="line"&gt;
        100
      &lt;/div&gt;
      &lt;div class="line"&gt;
        1
      &lt;/div&gt;
      &lt;div class="line"&gt;
        10
      &lt;/div&gt;
      &lt;div class="line"&gt;
        100
      &lt;/div&gt;
      &lt;div class="line"&gt;
        1
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/PQUDI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PQUDI.png" alt="enter image description here" /></a></p>
  <p>However, this obviously fails for several rows, because the numbers will not be aligned into columns:</p>
  <p><a href="https://i.stack.imgur.com/pBmFE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pBmFE.png" alt="enter image description here" /></a></p>
  <p>I've tried to use <code>colgroup</code> and set <code>display: rtl</code> etc. for the results <code>col</code>, but it would not work.</p>
  <hr />
  <p>Also note that <code>direction: rtl</code> results in wrong order of 'words' within a cell (see 1+ 2223, which should be 2223 +1). The latter is not really a big problem, as I will mostly have only numbers in the cells, so it's ok if the solution has this problem. But it'll be better if it does not.</p>