如何在视口中的 HTML 表格中定位锚点

Posted 2023-03-06

【中文标题】如何在视口中的 HTML 表格中定位锚点

【英文标题】：How to Position Anchors in HTML Tables in the Viewport

【发布时间】：2018-05-22 11:31:17

【问题描述】：

我在 html 表中使用 anchor elemnts 并想在视口顶部添加一些填充。我发现，我可以将锚点放置在 TD 元素内部的虚拟 DIV 元素中来实现这一点。不过我也想突出显示目标表行。

如何在没有 javascript 的情况下实现这一点？

我尝试了几种解决方案 HTML position:fixed page header and in-page anchors, 但它们在 html 表格中都不能很好地工作。

这是一些最小的工作示例。

“D”锚点具有正确突出显示，但定位不正确 工作。 “E”锚定位正确，但没有突出显示。

tr:target 
  color: #ee4444;
  position: relative;
  top: -40px;


div:target 
  color: #ee4444;
  position: relative;
  top: -40px;

<a href="#D">go to D</a> <a href="#E">go to E</a>
<table>
  <tr>
    <th>Symbol</th>
    <th>1932 ITU/ICAN Phonetic</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Amsterdam</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Baltimore</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Casablanca</td>
  </tr>
  <tr id="D">
    <td>D</td>
    <td>Denmark</td>
  </tr>
  <tr>
    <td>
      <div id="E"></div>E</td>
    <td>Edison</td>
  </tr>
  <tr>
    <td>F</td>
    <td>Florida</td>
  </tr>
  <tr>
    <td>G</td>
    <td>Gallipoli</td>
  </tr>
  <tr>
    <td>H</td>
    <td>Havana</td>
  </tr>
  <tr>
    <td>I</td>
    <td>Italia</td>
  </tr>
  <tr>
    <td>J</td>
    <td>Jerusalem</td>
  </tr>
  <tr>
    <td>K</td>
    <td>Kilogramme</td>
  </tr>
  <tr>
    <td>L</td>
    <td>Liverpool</td>
  </tr>
  <tr>
    <td>M</td>
    <td>Madagascar</td>
  </tr>
  <tr>
    <td>N</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>O</td>
    <td>Oslo</td>
  </tr>
  <tr>
    <td>P</td>
    <td>Paris</td>
  </tr>
  <tr>
    <td>Q</td>
    <td>Quebec</td>
  </tr>
  <tr>
    <td>R</td>
    <td>Roma</td>
  </tr>
  <tr>
    <td>S</td>
    <td>Santiago</td>
  </tr>
  <tr>
    <td>T</td>
    <td>Tripoli</td>
  </tr>
  <tr>
    <td>U</td>
    <td>Upsala</td>
  </tr>
  <tr>
    <td>V</td>
    <td>Valencia</td>
  </tr>
  <tr>
    <td>W</td>
    <td>Washington</td>
  </tr>
  <tr>
    <td>X</td>
    <td>Xanthippe</td>
  </tr>
  <tr>
    <td>Y</td>
    <td>Yokohama</td>
  </tr>
  <tr>
    <td>Z</td>
    <td>Zurich</td>
  </tr>
</table>

【问题讨论】：

你必须在这个部分添加任何内容

【参考方案1】：

如果您考虑将尝试的两种初始解决方案组合到一个标准中，则可以实现预期的行为，如下面嵌入的代码 sn-p 所示。

为您的锚点创建单独的表格行，分配您的 ids 对应这些元素。 使用相邻兄弟组合 ^Ref (+) 声明你的 伪选择器 :target 样式 用absolute定位声明你的锚点表行和 使用margin-top 属性值来偏移位置而不是 top 属性（因为这将定位元素 n 问题 相对到文档或最近的包含/父元素，relative定位）

代码片段演示：

table 
  border-spacing: 0;


.anchor-row:target + tr 
  color: #ee4444;


.anchor-row 
  position: absolute;
  margin-top: -40px;

<a href="#D">go to D</a> <a href="#E">go to E</a>
<table>
  <tr>
    <th>Symbol</th>
    <th>1932 ITU/ICAN Phonetic</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Amsterdam</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Baltimore</td>
  </tr>
  <tr>
    <td>C</td>
    <td>Casablanca</td>
  </tr>
  <tr class="anchor-row" id="D">
    <td colspan="2"></td>
  </tr>
  <tr>
    <td>D</td>
    <td>Denmark</td>
  </tr>
  <tr class="anchor-row" id="E">
    <td colspan="2"></td>
  </tr>
  <tr>
    <td>E</td>
    <td>Edison</td>
  </tr>
  <tr>
    <td>F</td>
    <td>Florida</td>
  </tr>
  <tr>
    <td>G</td>
    <td>Gallipoli</td>
  </tr>
  <tr>
    <td>H</td>
    <td>Havana</td>
  </tr>
  <tr>
    <td>I</td>
    <td>Italia</td>
  </tr>
  <tr>
    <td>J</td>
    <td>Jerusalem</td>
  </tr>
  <tr>
    <td>K</td>
    <td>Kilogramme</td>
  </tr>
  <tr>
    <td>L</td>
    <td>Liverpool</td>
  </tr>
  <tr>
    <td>M</td>
    <td>Madagascar</td>
  </tr>
  <tr>
    <td>N</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>O</td>
    <td>Oslo</td>
  </tr>
  <tr>
    <td>P</td>
    <td>Paris</td>
  </tr>
  <tr>
    <td>Q</td>
    <td>Quebec</td>
  </tr>
  <tr>
    <td>R</td>
    <td>Roma</td>
  </tr>
  <tr>
    <td>S</td>
    <td>Santiago</td>
  </tr>
  <tr>
    <td>T</td>
    <td>Tripoli</td>
  </tr>
  <tr>
    <td>U</td>
    <td>Upsala</td>
  </tr>
  <tr>
    <td>V</td>
    <td>Valencia</td>
  </tr>
  <tr>
    <td>W</td>
    <td>Washington</td>
  </tr>
  <tr>
    <td>X</td>
    <td>Xanthippe</td>
  </tr>
  <tr>
    <td>Y</td>
    <td>Yokohama</td>
  </tr>
  <tr>
    <td>Z</td>
    <td>Zurich</td>
  </tr>
</table>

【讨论】：

这几乎是我想要的。然而，额外的表格行呈现为一点额外的空间。我怎样才能删除它？

@user3307752 它不应该因为position: absolute 将元素从正常文档流中取出，这意味着它不会占用元素之间或元素周围的空间。但是，如果您可以将我链接到一个演示该问题的示例，我将愿意为您寻找并提供建议。

您的解决方案就是示例。如果您单击“运行代码 sn-p”，您会看到表格行“D”之前和之后有一些额外的空间。我也把解决方案转成HTML文件，用各种浏览器测试，结果都一样。

@user3307752 哦，天哪，那么小的间距 - 你非常注意那里的细节，我什至没有注意到（我必须在单元格以在视觉上强调它）。无论如何，这似乎是一个cell-spacing 问题（典型的表格格式问题）。您是否考虑过在包含 table 的元素上声明 border-spacing: 0;？ （答案已更新以证明这一点）

我没有考虑过，但这是个好主意。我还建议将padding: 2px; 添加到td 和th 元素中，以恢复原始间距。

【参考方案2】：

你可以在下面试试。

tr:target 
    color: #ee4444;
    position:relative;
    top:0px;

span:target 
   color: #ee4444;
   position:relative;
   top:0px;


<tr id="D"><td>D</td><td>Denmark</td></tr>
<tr><td><span id="E">hello</span>E</td><td>Edison</td></tr>