Question

我正在尝试使用pre块创建一个吉他琴颈的HTML页面，并在其上对齐table。我需要将表格完美排列，以便我可以在每个音品上写下音符，但由于某些原因，无论我做什么，我的table都不会排在pre元素上。

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<div style="position: relative; top: 0px; left: 0px">
<pre style="position: absolute; top: 0px; left: 0px; z-index: 0; font-size: 12px; color: #C8C8C8;">
────────┼┼─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫
        ││         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║
────────┼┼─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫────●────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫────●────╫
        ││         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║
────────┼┼─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫
        ││         ║         ║    ●    ║         ║    ●    ║         ║    ●    ║         ║    ●    ║         ║         ║         ║         ║         ║    ●    ║         ║    ●    ║         ║    ●    ║         ║    ●    ║         ║         ║         ║
────────┼┼─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫
        ││         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║
────────┼┼─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫────●────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫────●────╫
        ││         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║         ║
────────┼┼─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫─────────╫
</pre>

<table style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; font-size: 12px; color: black;">
<tr>
    <td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td>
</tr>
<tr>
    <td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td>
</tr>
<tr>
    <td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td>
</tr>
<tr>
    <td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td>
</tr>
<tr>
    <td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td>
</tr>
<tr>
    <td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td><td>X</td>
</tr>
</table>
</div>

</body>
</html>

我要找的最终结果是每个＆＃34; X＆＃34;在每个音品的顶部完美对齐，以创建漂亮的指板。

到目前为止它是这样的：

我一直在努力让这个问题排好几个小时......我似乎无法做到这一点。

Answer 1

我建议仅使用表格，避免尝试与CSS中不相关的元素对齐的痛苦。

只是一个简单的例子：

<table>
  <tr>
    <td class="zero">&nbsp;</td><td>e</td><td>f</td><td>f#</td><td>g</td><td>g#</td>
  </tr>
  <tr>
    <td class="zero">&nbsp;</td><td>b</td><td>c</td><td>c#</td><td>d</td><td>d#</td>
  </tr>
  <tr>
    <td class="zero">&nbsp;</td><td>g</td><td>g#</td><td>a</td><td>a#</td><td>b</td>
  </tr>
</table>

CSS：

table {
  border-collapse: collapse;
}

td {
  width: 4em;
  overflow: visible;
  padding: 0.2em;
  border: 1px solid black;
  border-right: 3px double black;
}

td.zero {
  width: 1em;
  border: 0;
  border-right: 4px double black;
}

Results

如何在预格式化的文本上对齐HTML表格？

1 个答案: