フォーマット済みのテキストにHTMLテーブルを揃えるにはどうすればよいですか？

私はギターネックのpreブロックを使って、その上にtableを並べたHTMLページを作成しようとしています。私はテーブルを完璧に整列させる必要があるので、各フレットの上にノートを書くことができますが、何らかの理由でtableが私の仕事に関係なくpre要素の上に並んでいません。フォーマット済みのテキストにHTMLテーブルを揃えるにはどうすればよいですか？

コード：

<!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」を持つことである見栄えのフレットボード線図を作成するためにフレット。

これは、これまでに次のようになります。私は、これは時間の権利をラインアップしてもらうのに苦労してきた

...私はちょうどそれを得るように見えることはできません。

出典

2017-10-06 tjwrona1992

テーブル内でのみ使用することをおすすめします。これは、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/

出典

2017-10-06 23:24:56 tobiv

フォーマット済みのテキストにHTMLテーブルを揃えるにはどうすればよいですか？

答えて

関連する問題