分组几个表列并向左溢出

如何解决分组几个表列并向左溢出

我想显示一种比赛结果表。每行都有一个参与者名称，后面是代表最后一场比赛参与者结果的几个单元格（例如，比赛每周进行一次）。像这样：

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）。后者并不是什么大问题，因为在单元格中我只会有很多数字，所以解决方案有这个问题也可以。但是如果没有的话会更好。

解决方法

我知道了。关键是使用将表与div一起包装到direction: rtl中，这使单元格从右向左移动并向左溢出。并使用position: absolute作为用户名。

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

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

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