将几个表列分组并溢出到左侧

Question

我想显示一种比赛结果表。每行都有一个参与者姓名，后跟几个代表上次比赛的参与者结果的单元格（例如，比赛每周举行一次）。像这样的：

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实现吗？

---

对于一行，我在没有table 的情况下实现了它，使用display: flex 和direction: rtl 仅用于“列”：

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>

但是，这显然对于几行都失败了，因为数字不会对齐到列中：

我尝试使用colgroup 并设置display: rtl 等作为结果col，但它不起作用。

---

另请注意，direction: rtl 会导致单元格内“单词”的顺序错误（请参阅 1+ 2223，应该是 2223 +1）。后者并不是什么大问题，因为我在单元格中大多只有数字，所以如果解决方案有这个问题也没关系。但是如果没有就更好了。

Answer 1

我明白了。关键是使用包装到div 和direction: rtl 中的表格，这使得单元格从右到左并溢出到左边。并使用position: absolute 作为用户名。

td 上的附加 direction: ltr 甚至可以使单元格内容以正确的方向呈现。

.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>

用户名单元格有不同的宽度，但在我看来是这样。