Html 将多个表列分组并向左溢出

我想显示一种比赛成绩表。每一行都有一个参与者名称，后面有几个单元格，表示参与者在上一次比赛中的成绩（例如，比赛每周举行一次）。大概是这样的：

User name    Aug 1   Aug 8   Aug 15
John Doe       1       10     100
Jane Doe      100      10      1

User name    g 1   Aug 8   Aug 15
John Doe     1       10     100
Jane Doe     00      10      1

如果存在许多列，表可能会变得非常宽。在这种情况下，我希望隐藏最早的列，以便只有少数最新的列可见，并且表不会溢出可用空间。用户名列应始终可见

“边界”单元可以这样“切割”：

User name    Aug 1   Aug 8   Aug 15
John Doe       1       10     100
Jane Doe      100      10      1

User name    g 1   Aug 8   Aug 15
John Doe     1       10     100
Jane Doe     00      10      1

…或者它们可以完全不可见，这两种变体我都可以接受

使用纯css可以实现这一点吗？

---

就一行而言，我在没有

表的情况下实现了它，只使用了
display:flex
和
direction:rtl
作为“列”：



.outer{
宽度：350px；
显示器：flex；
证明内容：弹性权利；
边框：1px纯黑；
}
.标题{
空白：nowrap；
右边距：10px；
}
.接线盒{
方向：rtl；
溢出：隐藏；
空白：nowrap；
}
.线路{
右边填充：10px；
显示：内联；
空白：nowrap；
}

用户名
2223 +1
10
100
1.
10
100
1.
10
100
1.
我知道了。关键是使用包装在
div
中的表，并使用
方向：rtl
，这将使单元格从右向左移动，并向左溢出。并使用
position:absolute
作为用户名

td
上的另一个
direction:ltr
甚至可以使单元格内容以正确的方向呈现


.outer{
宽度：300px；
边框：1px纯黑；
位置：相对位置；
方向：rtl；
溢出：隐藏；
}
.桌子{
空白：nowrap；
}
＊东区{
方向：ltr；
}
.标题{
位置：绝对位置；
左：0；
背景：白色；
右边填充：10px；
}

1 + 100
100
1000
1.
10
100
1000
1.
100
1000
1.
10
100
1000
1.
10
100
1000
用户名
1.
1.
1.
1.
10
100
1000
1.
100
1000
1.
10
100
1000
1.
10
100
1000
长用户名
我知道了。关键是使用包装在
div
中的表，并使用
方向：rtl
，这将使单元格从右向左移动，并向左溢出。并使用
position:absolute
作为用户名

td
上的另一个
direction:ltr
甚至可以使单元格内容以正确的方向呈现


.outer{
宽度：300px；
边框：1px纯黑；
位置：相对位置；
方向：rtl；
溢出：隐藏；
}
.桌子{
空白：nowrap；
}
＊东区{
方向：ltr；
}
.标题{
位置：绝对位置；
左：0；
背景：白色；
右边填充：10px；
}

1 + 100
100
1000
1.
10
100
1000
1.
100
1000
1.
10
100
1000
1.
10
100
1000
用户名
1.
1.
1.
1.
10
100
1000
1.
100
1000
1.
10
100
1000
1.
10
100
1000
长用户名