html - 你能强制绝对定位的表格单元格堆叠起来，就好像它们没有被从流中取出一样吗？

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

问题是您对绝对定位列有固定的 宽度。您可以增加宽度。

或

您可以对列使用 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>