[문의] Head가 고정된 Scroll Bar형식의 테이블을 만들려고 합니다.

안녕하세요.

인장에 넣을 경험치 표 테이블을 만들려고 하는데 잘 되지않아 문의 드립니다.

일단 만들고자 하는건 1) 고정된 헤드 (Head) 2) 스크롤바 (Scoll Bar) 입니다.

Lv.누적 경험치다음 레벨
필요 경험치마격 타임블로소득

	360001	36000	394200	Lv 10 (80) 획득 경험치 200 필요경험치의 0.56% Lv 11 (86) 획득 경험치 220 필요경험치의 0.31%
	396001	36000	430200
	432001	36000	466200
	468001	36000	502200
	504001	36000	538200
	540001	36000	574200
	576001	72000	644400
	648001	72000	716400
	720001	72000	788400
	792001	72000	860400
	864001	144000	1000800	Lv 11 (90) 획득 경험치 220 필요경험치의 0.15% Lv 11 (95) 획득 경험치 220 필요경험치의 0.08%
	1108001	144000	1144800
	1152001	144000	1288800
	1296001	144000	1432800
	1440001	144000	1576800
	1584001	288000	1857600
	1872001	288000	2145600
	2160001	288000	2433600
	2448001	288000	2721600
	2736001	∞	-
정보 출처: 예설하

이게 제가 현재까지 만든 표이고 현재 2가지 문제가 있습니다.

1. 보시는 것 처럼 테이블 헤드의 위치와 크기가 이상하게 되어있습니다.

(헤드가 각 각의 컨텐츠(?)들과 width가 같게 만들고 싶습니다...)

(3 번째 헤드인 '다음 레벨 필요 경험치'는 일부로 2줄로 나누었습니다.)

2. 스크롤바가 테이블에서 너무 멀리 떨어져 있습니다.

(display property도 설정해서 스크롤바를 테이블 옆에 붙여는 보았지만... 그러면 헤드가 사라지더라구요 ㅜㅜ...)

아래 코드 한 번 보시고 도움의 손길좀 부탁드립니다.

코드 표시

코드 숨김

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168

<!-- 인벤 경험치 표 Start --> <div id="table-wrapper" style="position: relative;">     <div id="table-scroll" style="height: 200px; overflow: auto; margin-top: 40px;">         <table border="0" cellpadding="0" style="border-collapse: collapse; text-align: center;">             <thead>                 <tr>                     <th><span class="text" style="position: absolute; top: -40px; z-index: 2; border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><b>Lv.</b></span></th>                     <th><span class="text" style="position: absolute; top: -40px; z-index: 2; border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><b>누적 경험치</b></span></th>                     <th><span class="text" style="position: absolute; top: -40px; z-index: 2; border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><b>다음 레벨<br />필요 경험치</b></span></th>                     <th><span class="text" style="position: absolute; top: -40px; z-index: 2; border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><b>마격 타임</b></span></th>                     <th><span class="text" style="position: absolute; top: -40px; z-index: 2; border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><b>블로소득</b></span></th>                 </tr>             </thead>             <tbody>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv80.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">360001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">36000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">394200</td>                     <td rowspan="10" style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><b>Lv 10 (80)</b><br />획득 경험치 200<br />필요경험치의 0.56%<br /><br /><b>Lv 11 (86)</b><br />획득 경험치 220<br />필요경험치의 0.31%</td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv81.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">396001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">36000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">430200</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv82.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">432001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">36000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">466200</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv83.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">468001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">36000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">502200</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv84.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">504001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">36000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">538200</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv85.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">540001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">36000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">574200</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv86.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">576001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">72000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">644400</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv87.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">648001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">72000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">716400</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv88.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">720001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">72000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">788400</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv89.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">792001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">72000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">860400</td>                     <td></td>                 </tr>                 <tr>                     <td colspan="5" style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px; background-color: #F5F5F5;"></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv90.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">864001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">144000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">1000800</td>                     <td rowspan="10" style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><b>Lv 11 (90)</b><br />획득 경험치 220<br />필요경험치의 0.15%<br /><br /><b>Lv 11 (95)</b><br />획득 경험치 220<br />필요경험치의 0.08%</td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv91.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">1108001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">144000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">1144800</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv92.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">1152001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">144000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">1288800</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv93.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">1296001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">144000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">1432800</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv94.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">1440001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">144000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">1576800</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv95.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">1584001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">288000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">1857600</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv96.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">1872001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">288000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">2145600</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv97.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">2160001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">288000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">2433600</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv98.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">2448001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">288000</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">2721600</td>                     <td></td>                 </tr>                 <tr>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><img src="https://static.inven.co.kr/image_2011/member/level/1202/lv99.gif"></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;">2736001</td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><b>∞</b></td>                     <td style="border: 1px solid; text-align: center; font-size: 11px; padding: 2px;"><b>-</b></td>                     <td></td>                 </tr>                 <tr>                     <td colspan="5" style="border: 1px solid; text-align: right; text-decoration: none; font-size: 11px; font-weight: bold; padding: 2px; background-color: #F5F5F5;">정보 출처: <a href="http://www.inven.co.kr/board/powerbbs.php?come_idx=3583&amp;l=182449" target="_blank" style="text-decoration: none; font-size: 11px; font-weight: bold; color: #000000">예설하</a></td>                 </tr>                 <tr>                     <td colspan="5" style="text-align: right; text-decoration: none; font-size: 11px; font-weight: bold; padding: 2px;">Made by Lone</td>                 </tr>             </tbody>         </table>     </div> </div> <!-- 인벤 경험치 표 End --> Colored by Color Scripter

cs

감사합니다.

p.s: 지금보니까 글 작성할 때랑 완성된 글을 보는 것도 다르게 표시가 되는군요...

(글로 작성한 것은 헤드마저 테이블에 종속되어 버리는군요 ㅜ_ㅜ)

작성할 때:

실제:

p.s 2: 실제로 인장에 적용하면 결과물이 완전 이상하게 되버리네요...

(제 인장으로 확인 부탁드립니다 ㅜㅜ)