내가 HTML 테이블이

Question

테이블 셀에서 텍스트 정렬에 영향을 미치지 않고 CSS와 화살표의 영구적 인 위치를 확인 같은 : 헤더에

<div> 
    <table border="1"> 
     <thead> 
      <tr class="example"> 
       <th> 
        <span id="item1"> 
         <span>Value1</span> 
         <span class="sort-up no-display">&nbsp;</span> 
        </span> 
       </th> 
       <th> 
        <span id="item2"> 
         <span>Value2</span> 
         <span class="sort-up no-display">&nbsp;</span> 
        </span> 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Example 1</td> 
       <td>Example 2</td> 
      </tr> 
      <tr> 
       <td>Example 3</td> 
       <td>Example 4</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

, 나는 JQuery와

에 마우스 오버 /로 마우스에서 나타나는 최대 숨겨진 화살표가

<script type="text/javascript"> 
     $(function(){ 
      $(".example th").on("mouseover mouseout", function(){ 
       var $sort_up = $(this).children().find("span").first().next(); 

       $sort_up.toggleClass("no-display"); 
      }); 
     }); 

</script> 

여기서 no-display은 display:none css입니다.

스크린 샷 (전)

그리고 후 :

내가 마우스 오버/mouseOut 이벤트로 이동할 수 없습니다에 해당 헤더 타이틀을 원한다.

어떻게 수행하나요? 어쩌면 CSS 속임수 일 수도 있습니다.

PS : 아마 같은 : 나와 함께 양해

덕분에 내가 CSS에서 더 이상 지식이 없다.

Answer 1

왜 이미지를 사용하여 화살표를 만들지는 모르겠지만 정렬 문제가 발생합니다. 당신은 텍스트 화살표를 만들 text()를 사용하는 경우, 위쪽 삼각형을 가리키는 악명 높은 유니 코드는 다음 정렬은 자체 유지 :

$('.example th').on('mouseover mouseout', 
        function(e){ 
         var evt = e.type, 
          sort = $(this).find('span:last'); 
         if (evt == 'mouseover'){ 
          sort.text('▲'); 
         } 
         else if (evt == 'mouseout') { 
          sort.text(''); 
         } 
        });​ 

JS Fiddle demo합니다.

Answer 2

은 화살표가 나타날 때조차 고정 remanin 것, 이제 이러한 변화

<span id="Val">Value2</span> 
#Val{position:absolute;} Add top and left as per your need. 

을 확인합니다.

Answer 3

CSS 속성을 사용하여 html flow 밖으로 가져옵니다. position: absolute 또는 float: right입니다.