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

【问题标题】：How can I align an HTML table over pre-formatted text?如何在预先格式化的文本上对齐 HTML 表格？
【发布时间】：2018-03-18 16:14:02
【问题描述】：

我正在尝试使用 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>

我正在寻找的最终结果是让每个“X”在每个音品的顶部完美对齐，以创建一个漂亮的指板图。

这是目前的样子：

我一直在努力让它正确排列好几个小时......我似乎无法正确排列。

【问题讨论】：

标签： html css layout html-table pre

【解决方案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;
}

https://jsfiddle.net/fatjq3w2/2/

【讨论】：