Можете ли вы заставить стопроцентно расположенные настольные ячейки складываться так, как если бы они не были извлечены из потока?

Question

Я работаю с фиксированной таблицей первого столбца, чтобы при горизонтальной прокрутке, например, в мобильном телефоне, первый столбец фиксировался.

Проблема, с которой я столкнулся при реализации, заключается в том, что когда содержимое ячейки в этом фиксированном столбце выходит за пределы одной строки текста, текст перетекает в следующую ячейку строк. Это связано с абсолютным позиционированием ячеек в этом фиксированном столбце.

Моя реализация (с https://codepen.io/gregor/pen/ApKxu):

HTML

<div>
  <table class="sticky">
    <thead>
      <tr>
        <th class="headcol">RM</th>
        <th>Average</th>
        <th>Lombardi</th>
        <th>Brzycki</th>
        <th>Epley</th>
        <th>Mayhew</th>
        <th>O'Conner</th>
        <th>Wathan</th>
        <th>Lander</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="headcol">1RM</td>
        <td><strong>12</strong></td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
        <td>12</td>
      </tr>
      <tr>
        <td class="headcol">2RM</td>
        <td><strong>11</strong>
        </td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr>
        <td class="headcol">3RM</td>
        <td><strong>10</strong>
        </td>
        <td>10</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr>
        <td class="headcol">4RM</td>
        <td><strong>10</strong>
        </td>
        <td>10</td>
        <td>11</td>
        <td>10</td>
        <td>11</td>
        <td>11</td>
        <td>10</td>
        <td>11</td>
      </tr>
      <tr>
        <td class="headcol">5RM</td>
        <td><strong>10</strong>
        </td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
      </tr>
      <tr>
        <td class="headcol">6RM</td>
        <td><strong>10</strong>
        </td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
      </tr>
      <tr>
        <td class="headcol">7RM</td>
        <td><strong>9</strong>
        </td>
        <td>9</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>9</td>
        <td>10</td>
      </tr>
      <tr>
        <td class="headcol">8RM</td>
        <td><strong>9</strong>
        </td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>10</td>
        <td>10</td>
        <td>9</td>
        <td>9</td>
      </tr>
      <tr>
        <td class="headcol">9RM</td>
        <td><strong>9</strong>
        </td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>10</td>
        <td>10</td>
        <td>9</td>
        <td>9</td>
      </tr>
      <tr>
        <td class="headcol">10RM</td>
        <td><strong>9</strong>
        </td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

div {
  overflow-x:scroll;  
  margin-left:2em;
    }
.headcol {
  position:absolute;
    width:2em;
    left:0;
    }

Проблема возникает, когда я добавляю 'Foo Foo' к '1RM' в одной из ячеек фиксированного столбца, например:

<td class="headcol">1RM Foo Foo</td>

Результат:

Идеи?

TIA

Answer 1

Проблема в том, что у вас есть фиксированный width для столбца с абсолютным позиционированием. Вы можете увеличить ширину.

ИЛИ

Вы можете использовать position: sticky и background-color для столбца.

div {
  overflow-x:scroll;  
  margin-left:2em;
}
    
.headcol {
  position:sticky;
  left:0;
  background-color: white;
	width: auto;
}

<div>
  <table class="sticky">
    <thead>
      <tr>
        <th class="headcol">RM</th>
        <th>Average</th>
        <th><a href="http://en.wikipedia.org/wiki/One-repetition_maximum#Lombardi" target="_blank">Lombardi</a>
        </th>
        <th><a href="http://en.wikipedia.org/wiki/One-repetition_maximum#Brzycki" target="_blank">Brzycki</a>
        </th>
        <th><a href="http://en.wikipedia.org/wiki/One-repetition_maximum#Epley" target="_blank">Epley</a>
        </th>
        <th><a href="http://en.wikipedia.org/wiki/One-repetition_maximum#Mayhew_et_al." target="_blank">Mayhew</a>
        </th>
        <th><a href="http://en.wikipedia.org/wiki/One-repetition_maximum#O.27Conner_et_al." target="_blank">O'Conner</a>
        </th>
        <th><a href="http://en.wikipedia.org/wiki/One-repetition_maximum#Wathan" target="_blank">Wathan</a>
        </th>
        <th><a href="http://en.wikipedia.org/wiki/One-repetition_maximum#Lander" target="_blank">Lander</a>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="headcol">1RM Foo Foo</td>
        <td style="font-size: 120%;"><strong>12</strong>
        </td>
        <td style="font-size: 120%;">12</td>
        <td style="font-size: 120%;">12</td>
        <td style="font-size: 120%;">12</td>
        <td style="font-size: 120%;">12</td>
        <td style="font-size: 120%;">12</td>
        <td style="font-size: 120%;">12</td>
        <td style="font-size: 120%;">12</td>
      </tr>
      <tr>
        <td class="headcol">2RM</td>
        <td><strong>11</strong>
        </td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr>
        <td class="headcol">3RM</td>
        <td><strong>10</strong>
        </td>
        <td>10</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
        <td>11</td>
      </tr>
      <tr>
        <td class="headcol">4RM</td>
        <td><strong>10</strong>
        </td>
        <td>10</td>
        <td>11</td>
        <td>10</td>
        <td>11</td>
        <td>11</td>
        <td>10</td>
        <td>11</td>
      </tr>
      <tr>
        <td class="headcol">5RM</td>
        <td><strong>10</strong>
        </td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
      </tr>
      <tr>
        <td class="headcol">6RM</td>
        <td><strong>10</strong>
        </td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
      </tr>
      <tr>
        <td class="headcol">7RM</td>
        <td><strong>9</strong>
        </td>
        <td>9</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>10</td>
        <td>9</td>
        <td>10</td>
      </tr>
      <tr>
        <td class="headcol">8RM</td>
        <td><strong>9</strong>
        </td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>10</td>
        <td>10</td>
        <td>9</td>
        <td>9</td>
      </tr>
      <tr>
        <td class="headcol">9RM</td>
        <td><strong>9</strong>
        </td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>10</td>
        <td>10</td>
        <td>9</td>
        <td>9</td>
      </tr>
      <tr>
        <td class="headcol">10RM</td>
        <td><strong>9</strong>
        </td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
        <td>9</td>
      </tr>
    </tbody>

  </table>

</div>

Answer 2

Вы можете использовать этот код

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Hello, world!</title>
  <style type="text/css">
    body {
      padding: 0;
      margin: 0;
    }
    
    .table-scroll {
      position: relative;
      max-width: 775px;
      margin: auto;
      overflow: hidden;
      border: 1px solid #000;
    }
    
    .table-wrap {
      width: 100%;
      overflow: auto;
    }
    
    .table-scroll table {
      width: 100%;
      margin: auto;
      border-collapse: separate;
      border-spacing: 0;
    }
    
    .table-scroll th,
    .table-scroll td {
      padding: 5px 10px;
      border: 1px solid #000;
      background: #fff;
      white-space: nowrap;
      vertical-align: top;
    }
    
    .table-scroll thead,
    .table-scroll tfoot {
      background: #f9f9f9;
    }
    
    .clone {
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
    }
    
    .clone th,
    .clone td {
      visibility: hidden
    }
    
    .clone td,
    .clone th {
      border-color: transparent
    }
    
    .clone tbody th {
      visibility: visible;
      color: #000;
    }
    
    .clone .fixed-side {
      border: 1px solid #000;
      background: #eee;
      visibility: visible;
    }
    
    .clone thead,
    .clone tfoot {
      background: transparent;
    }
  </style>
</head>

<body>
  <div id="table-scroll" class="table-scroll">
    <div class="table-wrap">
      <table class="main-table">
        <thead>
          <tr>
            <th class="fixed-side" scope="col">RM</th>
            <th scope="col">Average</th>
            <th scope="col"><a href="http://en.wikipedia.org/wiki/One-repetition_maximum#Lombardi" target="_blank">Lombardi</a></th>
            <th scope="col"><a href="http://en.wikipedia.org/wiki/One-repetition_maximum#Brzycki" target="_blank">Brzycki</a></th>
            <th scope="col"><a href="http://en.wikipedia.org/wiki/One-repetition_maximum#Epley" target="_blank">Epley</a></th>
            <th scope="col"><a href="http://en.wikipedia.org/wiki/One-repetition_maximum#Mayhew_et_al." target="_blank">Mayhew</a></th>
            <th scope="col"><a href="http://en.wikipedia.org/wiki/One-repetition_maximum#O.27Conner_et_al." target="_blank">O'Conner</a></th>
            <th scope="col"><a href="http://en.wikipedia.org/wiki/One-repetition_maximum#Wathan" target="_blank">Wathan</a></th>
            <th scope="col"><a href="http://en.wikipedia.org/wiki/One-repetition_maximum#Lander" target="_blank">Lander</a></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th class="fixed-side">1RM Foo Foo</th>
            <td style="font-size: 120%;"><strong>12</strong></td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
            <td style="font-size: 120%;">12</td>
          </tr>
          <tr>
            <th class="fixed-side">2RM</th>
            <td><strong>11</strong></td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
          </tr>
          <tr>
            <th class="fixed-side">3RM</th>
            <td><strong>10</strong></td>
            <td>10</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
            <td>11</td>
          </tr>
          <tr>
            <th class="fixed-side">4RM</th>
            <td><strong>10</strong></td>
            <td>10</td>
            <td>11</td>
            <td>10</td>
            <td>11</td>
            <td>11</td>
            <td>10</td>
            <td>11</td>
          </tr>
          <tr>
            <th class="fixed-side">5RM</th>
            <td><strong>10</strong></td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
          </tr>
          <tr>
            <th class="fixed-side">6RM</th>
            <td><strong>10</strong></td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
          </tr>
          <tr>
            <th class="fixed-side">7RM</th>
            <td><strong>9</strong></td>
            <td>9</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>10</td>
            <td>9</td>
            <td>10</td>
          </tr>
          <tr>
            <th class="fixed-side">8RM</th>
            <td><strong>9</strong></td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>10</td>
            <td>10</td>
            <td>9</td>
            <td>9</td>
          </tr>
          <tr>
            <th class="fixed-side">9RM</th>
            <td><strong>9</strong></td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>10</td>
            <td>10</td>
            <td>9</td>
            <td>9</td>
          </tr>
          <tr>
            <th class="fixed-side">10RM</th>
            <td><strong>9</strong></td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
            <td>9</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script type="text/javascript">
    // requires jquery library
    jQuery(document).ready(function() {
      jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');
    });
  </script>
</body>

</html>