Group several table columns and overflow to left - html

Question

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:
User name Aug 1 Aug 8 Aug 15
John Doe 1 10 100
Jane Doe 100 10 1
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.
The "borderline" cells can be "cut" like this:
User name g 1 Aug 8 Aug 15
John Doe 1 10 100
Jane Doe 00 10 1
...or they can be completely invisible, both variants are acceptable to me.
It is possible to achieve this with pure css?
For just one line, I've achieved it without a table, using display: flex together with direction: rtl for the 'columns' only:
https://jsfiddle.net/fo2Ldk3n/
.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;
}
<div class="outer">
<div class="header">
User Name
</div>
<div class="line-box">
<div class="line">
2223 +1
</div>
<div class="line">
10
</div>
<div class="line">
100
</div>
<div class="line">
1
</div>
<div class="line">
10
</div>
<div class="line">
100
</div>
<div class="line">
1
</div>
<div class="line">
10
</div>
<div class="line">
100
</div>
<div class="line">
1
</div>
</div>
</div>
However, this obviously fails for several rows, because the numbers will not be aligned into columns:
I've tried to use colgroup and set display: rtl etc. for the results col, but it would not work.
Also note that direction: rtl 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.

Answer 1

I've got it. The key is to use table wrapped into div with direction: rtl, this gives cells going from right to left and overflowing to the left. And use position: absolute for user names.
An additional direction: ltr on td even makes cell content render in correct direction.
.outer {
width: 300px;
border: 1px solid black;
position: relative;
direction: rtl;
overflow: hidden;
}
.table {
white-space: nowrap;
}
.row td {
direction: ltr;
}
.header {
position: absolute;
left: 0;
background: white;
padding-right: 10px;
}
<div class="outer">
<table class="table">
<tr class="row">
<td>1 + 100</td>
<td>100</td>
<td>1000</td>
<td>1</td>
<td>10</td>
<td>100</td>
<td>1000</td>
<td>1</td>
<td>100</td>
<td>1000</td>
<td>1</td>
<td>10</td>
<td>100</td>
<td>1000</td>
<td>1</td>
<td>10</td>
<td>100</td>
<td>1000</td>
<td class="header">User name</td>
</tr>
<tr class="row">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>10</td>
<td>100</td>
<td>1000</td>
<td>1</td>
<td>100</td>
<td>1000</td>
<td>1</td>
<td>10</td>
<td>100</td>
<td>1000</td>
<td>1</td>
<td>10</td>
<td>100</td>
<td>1000</td>
<td class="header">Long long user name</td>
</tr>
</table>
</div>
The user name cells have different widths, but this seems to me.