时间戳

首页 > 解决方案 > 你能强制绝对定位的表格单元格堆叠起来，就好像它们没有脱离流动一样？

html - 你能强制绝对定位的表格单元格堆叠起来，就好像它们没有脱离流动一样？

问题描述

我正在处理一个固定的第一列表，因此当它水平滚动时，例如在移动设备中，第一列是固定的。

我的实现遇到的问题是，当该固定列中单元格的内容超出一行文本时，文本会溢出到下一行单元格中。这是由于该固定列中单元格的绝对定位。

我的实现（来自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

标签： htmlcsshtml-table

解决方案

问题是您有一个width绝对定位列的固定值。你可以增加宽度。

或者

您可以将position: stickyandbackground-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>

推荐阅读