Comment aligner un tableau HTML sur du texte pré-formaté?

J'essaie de créer une page HTML d'un manche de guitare en utilisant un bloc pre avec un table aligné dessus. J'ai besoin que la table s'aligne parfaitement pour que je puisse écrire les notes sur chaque case, mais pour une raison quelconque, mon table ne sera pas aligné sur l'élément pre, peu importe ce que je fais.Comment aligner un tableau HTML sur du texte pré-formaté?

code:

<!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>

Le résultat final, je suis à la recherche est d'avoir chaque « X » parfaitement alignés sur le dessus de chaque frette pour créer une jolie diagramme idéogramme.

C'est ce qu'il ressemble à ce jour:

J'ai du mal à obtenir ce pour aligner à droite pendant des heures ... Je ne peux pas sembler pour obtenir ce droit.

Source

2017-10-06 tjwrona1992

Je recommande d'utiliser uniquement une table, épargnez-vous la peine d'essayer d'aligner à des éléments indépendants dans CSS.

Juste un exemple rapide:

<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/

Source

2017-10-06 23:24:56 tobiv

Comment aligner un tableau HTML sur du texte pré-formaté?

Répondre

Questions connexes