时间戳

首页 > 解决方案 > 如何沿表格中的行添加文本或图像？

html - 如何沿表格中的行添加文本或图像？

问题描述

我希望它看起来类似于此 MDN 图像上黑色圆圈中的数字。

https://developer.mozilla.org/en-US/docs/Glossary/Grid_Lines/1_diagram_numbered_grid_lines.png

<table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </table>


table {
  border-collapse: collapse;
  margin: 0 auto;
}
table td {
  padding: 1rem;
  border: 3px solid black; 
}

标签： htmlcss

解决方案

您可以尝试以下方法：

  1. 创建一个包装 div，将网格图像以相对定位放入其中，并将文本（div）以绝对定位放入其中，如下所示：如何相对于底层图像绝对定位形状元素？
  2. 或者您可以使用画布并自己绘制整个事物。

可能有更多的方法可以做到这一点，但请先看一下上面的内容。

推荐阅读