1. 홈
  2. 질의 응답
  3. 테이블 헤더의 툴팁

테이블 헤더의 툴팁

2017-12-04 34 views
0

고정 헤더와 열 및 툴팁이있는 스크롤 가능한 테이블이 있습니다. 헤더에 행 간격 막대가 있습니다. 헤더 행의 툴팁을 다음 행의 머리글 셀 위쪽에 표시하려면 오랜 시간 동안 노력했습니다. 나는 W3C 스펙을 포함하여 스태킹 컨텍스트와 Z- 인덱스에서 찾을 수있는 모든 것을 읽은 후에도 솔루션을 찾지 못하는 것 같습니다.테이블 헤더의 툴팁

CSS :

.gradebooktable { 
    overflow: auto; 
    height: 200px; 
    width: 400px 
} 

table { 
    table-layout: fixed; 
    border-width: 0; 
    border-spacing: 0; 
} 

td { 
    position:relative; 
    padding: 3px; 
    white-space: nowrap; 
    border-right: 1px solid #ccc; 
} 

th { 
    position:relative; 
    z-index:20; 
    background: #999; 
} 

th.pinned { 
    position: relative; 
    z-index: 40;  
    background: #ccc; 
} 

td.pinned { 
    position: relative; 
    z-index: 30; 
    background: #eee; 
} 

.tooltip{ 
    position:relative; 
} 

.tooltiptext{ 
    display:none; 
    position:absolute; 
    z-index:10; 
    border:1px; 
    background-color:#eee; 
    border-style:solid; 
    border-width:1px; 
    border-color:blue; 
    border-radius: 6px; 
    padding:3px; 
    color:blue; 
    top:20px; 
    left:20px; 
} 

.tooltip:hover span.tooltiptext{ 
    display:block; 
}

HTML : 여기

<BODY> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<SCRIPT> 
$(function() { 
$('#gradebooktable').scroll(function() { 
     var translate = "translate(0," + this.scrollTop + "px)"; 
     $("table thead th:not(.pinned)").css('transform', translate); 

     translate = "translate(" + this.scrollLeft + "px,0)"; 
     $("table tbody .pinned").css('transform', translate); 

     translate = "translate(" + this.scrollLeft + "px," + this.scrollTop + "px)"; 
     $("table thead th.pinned").css('transform', translate); 
    } 
); 
}); 
</SCRIPT> 
    <div id="gradebooktable" class="gradebooktable"> 
    <table> 
     <thead> 
     <tr> 
      <th class="pinned" rowspan=3>Col 0</th> 
      <th class="pinned" rowspan=3>Col 1</th> 
      <th class="tooltip">Col 2A 
       <span class="tooltiptext">Tooltip for header cell</span></th> 
      <th class="tooltip">Col 3A 
       <span class="tooltiptext">Tooltip for header cell</span></th> 
      <th class="tooltip">Col 4A 
       <span class="tooltiptext">Tooltip for header cell</span></th> 
      <th class="tooltip">Col 5A 
       <span class="tooltiptext">Tooltip for header cell</span></th> 
      <th class="tooltip">Col 6A 
       <span class="tooltiptext">Tooltip for header cell</span></th> 
      <th class="tooltip">Col 7A 
       <span class="tooltiptext">Tooltip for header cell</span></th> 
      <th class="tooltip">Col 8A 
       <span class="tooltiptext">Tooltip for header cell</span></th> 
      <th class="tooltip">Col 9A 
       <span class="tooltiptext">Tooltip for header cell</span></th> 
     </tr> 
     <tr> 
      <th>Col 2B</th> 
      <th>Col 3B</th> 
      <th>Col 4B</th> 
      <th>Col 5B</th> 
      <th>Col 6B</th> 
      <th>Col 7B</th> 
      <th>Col 8B</th> 
      <th>Col 9B</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td class="pinned">First Cell</td> 
      <td class="pinned">Second Cell</td> 
      <td class="tooltip">Another Cell 
        <span class="tooltiptext">Tooltip for body cell</span></td> 
      <td class="tooltip">Another Cell 
        <span class="tooltiptext">Tooltip for body cell</span></td> 
      <td class="tooltip">Another Cell 
        <span class="tooltiptext">Tooltip for body cell</span></td> 
      <td class="tooltip">Another Cell 
        <span class="tooltiptext">Tooltip for body cell</span></td> 
      <td class="tooltip">Another Cell 
        <span class="tooltiptext">Tooltip for body cell</span></td> 
      <td class="tooltip">Another Cell 
        <span class="tooltiptext">Tooltip for body cell</span></td> 
      <td class="tooltip">Another Cell 
        <span class="tooltiptext">Tooltip for body cell</span></td> 
      <td class="tooltip">Another Cell 
        <span class="tooltiptext">Tooltip for body cell</span></td> 
     </tr> 
     <tr> 
      <td class="pinned">First Cell</td> 
      <td class="pinned">Second Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
     </tr> 
     <tr> 
      <td class="pinned">First Cell</td> 
      <td class="pinned">Second Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
     </tr> 
     <tr> 
      <td class="pinned">First Cell</td> 
      <td class="pinned">Second Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
     </tr> 
     <tr> 
      <td class="pinned">First Cell</td> 
      <td class="pinned">Second Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
     </tr> 
     <tr> 
      <td class="pinned">First Cell</td> 
      <td class="pinned">Second Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
     </tr> 
     <tr> 
      <td class="pinned">First Cell</td> 
      <td class="pinned">Second Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
      <td>Another Cell</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</BODY>

바이올린 : https://jsfiddle.net/k42myms3/5/

목표는 상단에 표시하는 스팬 헤더 행의 맨 윗줄에 툴팁을 얻을 것입니다 스팬 된 헤더 행의 맨 아래 행에있는 셀의 예를 들어 .tooltiptext CSS에서 절대 위치를 제거하여 툴팁을 표시하는 방법을 찾을 수 있지만 위치 지정 문제를 일으키지 않거나 고정 된 헤더와 열 뒤에 표 셀을 스크롤하지 않아도됩니다. 그것을 고정

출처

2017-12-04 user2380187

답변

 관련 문제

  • 관련 문제 없음^_^