CSS SORT 버튼 이미지(▲▼) 상하 배치 방법? 정보
CSS SORT 버튼 이미지(▲▼) 상하 배치 방법?본문
오류 주소 : 없음
<div style="width:100%;">
<table>
<caption>메뉴</caption>
<colgroup>
<col width="40px" />
<col />
<col />
<col />
</colgroup>
<tbody>
<tr>
<td>업체명</td>
<td>고객명</td>
<td>비고</td>
</tr>
<? for($i=0; $i<10; $i++;){?>
<tr>
<td>마이크로소프트</td>
<td>빌게이츠</td>
<td>메모</td>
</tr>
<?}?>
</tbody>
</table>
</div>
위와 같은 기본 구조에 번호/고객명/회사명에 sort 기능을 추가하려고 합니다.
그래서 첨부 이미지와 같은 구조로 css 구성을 하였습니다.
첨부 이미지에서 처럼 ▲ 오름차, ▼ 내림차를 위, 아래로 배치해서 위, 아래라는것을 인지하도록 하고 싶습니다.
첨부 이미지 처럼 위, 아래로 배치하려면 어떻게해야 할 수 있는지 궁금합니다.
댓글 전체
<div style="width:100%;"> <= 100% 위에 따로 감싸주는 레이어에 가로 사이즈가 정해져 있는 경우면(전체 폭 1004px 처럼)
<div style="width:100%; position:relative;">
<td>마이크로소프트
<span style="position:absolute; left:200px; top:100px;">위</span>
<span style="position:absolute; left:200px; top:110px;">아래</span>
</td>
저같은 경우는 그냥 이렇게 처리할 듯 하네요~ㅎㅎ
<div style="width:100%; position:relative;">
<td>마이크로소프트
<span style="position:absolute; left:200px; top:100px;">위</span>
<span style="position:absolute; left:200px; top:110px;">아래</span>
</td>
저같은 경우는 그냥 이렇게 처리할 듯 하네요~ㅎㅎ
일단.. 이걸로 해봤는데.. 만약.. 가로 사이즈가 가변형인 absolute 로 처리하기 어려워지겠네요?
답변 감사합니다!
답변 감사합니다!
가변형이면
<td>마이크로소프트</td><td>위아래이미지 이미지맵<map></map></td><td>고객명</td>
형태로 해도 되구요
<td>안에 float 사용하거나
<td><div style="position:relative; width:100px; text-align:left;">내용 <버튼 absolute></div></td>
이런 형태도 가능하긴 합니다~
<td>마이크로소프트</td><td>위아래이미지 이미지맵<map></map></td><td>고객명</td>
형태로 해도 되구요
<td>안에 float 사용하거나
<td><div style="position:relative; width:100px; text-align:left;">내용 <버튼 absolute></div></td>
이런 형태도 가능하긴 합니다~
한번해보겠습니다!
∧∨ 이렇게는 붙일 수 있는데.. 위, 아래가 막히더라구요.
absolute 로 top left 처리하니 쉽게 해결되던데, 가변형은 둥둥~ 떠다니더라구요.
relative 를 아직 파악하진 못했지만.. 한번 해보겠습니다.
감사합니다!
∧∨ 이렇게는 붙일 수 있는데.. 위, 아래가 막히더라구요.
absolute 로 top left 처리하니 쉽게 해결되던데, 가변형은 둥둥~ 떠다니더라구요.
relative 를 아직 파악하진 못했지만.. 한번 해보겠습니다.
감사합니다!
