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

用户3307752

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

我怎样才能在没有 javascript 的情况下实现这一目标?

我从HTML position:fixed page header 和 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. 为您的锚点创建单独的表格行,将您各自的ids分配给这些元素。
  2. 使用相邻的兄弟组合器 Ref ( +) 来声明你的伪选择器 :target样式
  3. 声明的锚点表列与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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在PyCharm中的两个视口中编辑文件?

来自分类Dev

如何在安全性报告中(而不只是视口中)包括整页的屏幕截图?

来自分类Dev

如何在html中的远程服务器中创建文件的锚点

来自分类Dev

如何延迟html / css加载,直到项目在视口中

来自分类Dev

如何在HTML中显式使用客户端的默认视口设置?

来自分类Dev

如何在HTML中显式使用客户端的默认视口设置?

来自分类Dev

如何像在jQuery中的CSS a:hover中那样定位锚点'Hover'事件

来自分类Dev

如何创建仅在HTML中需要锚点的“查看/阅读更多”功能?

来自分类Dev

带有HTML表格和锚点的iPhone Bug

来自分类Dev

如何在HTML5 / CSS3中将视口锁定为纵向方向

来自分类Dev

如何在弹出窗口中编辑html?

来自分类Dev

在较小的视口中显示HTML时如何最好地处理<img>大小

来自分类Dev

在视口中播放html视频,在离开视口时暂停

来自分类Dev

如何定义绝对定位元素的锚点?

来自分类Dev

如何在视口中心显示div?

来自分类Dev

如何在视口中获取选定的 div?

来自分类Dev

如何定位覆盖列表项和无序列表中的最后一个锚点元素

来自分类Dev

如何在锚点(视图)上添加多个列表弹出窗口并将每个listpopupwindow定位到锚点?

来自分类Dev

如何在HTML表格中重做classchange

来自分类Dev

如何在HTML表格中设置标题

来自分类Dev

如何在表格 Html 中添加 contenteditable

来自分类Dev

如何在 Javascript 中插入 HTML 表格?

来自分类Dev

如何在 html 中左对齐表格

来自分类Dev

如何禁用视口中一定数量点以下的标记聚类?

来自分类Dev

grid.text和视口中的定位

来自分类Dev

如何在 html 表格中显示来自 html 表单的数据

来自分类Dev

如何在模板中的Django URL中添加锚点

来自分类Dev

HTML5如何在表格中对齐表格?

来自分类Dev

如何在表格中居中输入表格?的HTML

Related 相关文章

  1. 1

    如何在PyCharm中的两个视口中编辑文件?

  2. 2

    如何在安全性报告中(而不只是视口中)包括整页的屏幕截图?

  3. 3

    如何在html中的远程服务器中创建文件的锚点

  4. 4

    如何延迟html / css加载,直到项目在视口中

  5. 5

    如何在HTML中显式使用客户端的默认视口设置?

  6. 6

    如何在HTML中显式使用客户端的默认视口设置?

  7. 7

    如何像在jQuery中的CSS a:hover中那样定位锚点'Hover'事件

  8. 8

    如何创建仅在HTML中需要锚点的“查看/阅读更多”功能?

  9. 9

    带有HTML表格和锚点的iPhone Bug

  10. 10

    如何在HTML5 / CSS3中将视口锁定为纵向方向

  11. 11

    如何在弹出窗口中编辑html?

  12. 12

    在较小的视口中显示HTML时如何最好地处理<img>大小

  13. 13

    在视口中播放html视频,在离开视口时暂停

  14. 14

    如何定义绝对定位元素的锚点?

  15. 15

    如何在视口中心显示div?

  16. 16

    如何在视口中获取选定的 div?

  17. 17

    如何定位覆盖列表项和无序列表中的最后一个锚点元素

  18. 18

    如何在锚点(视图)上添加多个列表弹出窗口并将每个listpopupwindow定位到锚点?

  19. 19

    如何在HTML表格中重做classchange

  20. 20

    如何在HTML表格中设置标题

  21. 21

    如何在表格 Html 中添加 contenteditable

  22. 22

    如何在 Javascript 中插入 HTML 表格?

  23. 23

    如何在 html 中左对齐表格

  24. 24

    如何禁用视口中一定数量点以下的标记聚类?

  25. 25

    grid.text和视口中的定位

  26. 26

    如何在 html 表格中显示来自 html 表单的数据

  27. 27

    如何在模板中的Django URL中添加锚点

  28. 28

    HTML5如何在表格中对齐表格?

  29. 29

    如何在表格中居中输入表格?的HTML

热门标签

归档