テーブルヘッダーのヒント

固定ヘッダーと列、およびヘッダーのツールチップがあるスクロール可能なテーブルがあります。ヘッダーには行スパンもあります。私は長い間、ヘッダー行のツールチップを取得して、次の行のヘッダーセルの上に表示しようとしました。私は、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

気にしないで、それを修正：https://jsfiddle.net/k42myms3/10/

コードを追加：

th.tooltip{ 
    position:relative; 
    z-index: 35; 
}

...といくつか他のものを。

出典

2017-12-05 05:33:15 user2380187

テーブルヘッダーのヒント

答えて

関連する問題