미리 포맷 된 텍스트 위에 HTML 표를 정렬하려면 어떻게해야합니까?

블록을 사용하여 pre 블록을 사용하여 기타 목의 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 표를 정렬하려면 어떻게해야합니까?

답변

관련 문제