Блог

Я хочу отобразить своего рода таблицу результатов соревнований. В каждой строке указано имя участника, за которым следует несколько ячеек, представляющих результаты участников в последних соревнованиях (скажем, соревнования проводятся раз в неделю). Что-то вроде этого:

 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>  

Ячейки имени пользователя имеют разную ширину, но мне кажется, что это так.