テーブルのポップアップの位置y-位置

ポップアップが常にテーブルと同じ高さに表示される可能性はありますか？テーブルが下に移動すると、ポップアップも下に移動する必要があります。または、4番目の列を追加してそこにポップアップを表示することは可能ですか？それとも良い方法がありますか？テーブルのポップアップの位置y-位置

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Test</title> 
    <meta charset="utf-8"> 
    <style> 
     #matrix table { 
      width:300px; 
      border-collapse:collapse; 
     } 

     #matrix td { 
      border:1px solid black; 
     } 

     #matrix td:hover { 
      background-color: #ff0000; 
     } 

     #matrix td span { 
      display: none; 
     } 

     #matrix td:hover span { 
      display: block; 
      position: absolute; 
      top: 8px; 
      left: 310px; 
      width: 100px; 
      background: #e5e5e5; 
     } 
    </style> 
</head> 
<body> 
    <div id="matrix"> 
     <table> 
      <tr> 
       <td>1<span>Further information 1</span></td> 
       <td>2<span>Further information 2</span></td> 
       <td>3<span>Further information 3</span></td> 
      </tr> 
      <tr> 
       <td>4<span>Further information 4</span></td> 
       <td>5<span>Further information 5</span></td> 
       <td>6<span>Further information 6</span></td> 
      </tr> 
      <tr> 
       <td>7<span>Further information 7</span></td> 
       <td>8<span>Further information 8</span></td> 
       <td>9<span>Further information 9</span></td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

出典

2017-03-01 seeberg

#matrixのTDで次の試してみてください：ホバースパン：

表示：インライン;

と削除：

トップ：8px。

;

 #matrix table { 
 
      width:300px; 
 
      border-collapse:collapse; 
 
     } 
 

 
     #matrix td { 
 
      border:1px solid black; 
 
     } 
 

 
     #matrix td:hover { 
 
      background-color: #ff0000; 
 
     } 
 

 
     #matrix td span { 
 
      display: none; 
 
     } 
 

 
     #matrix td:hover span { 
 
      display: inline; 
 
      position: absolute; 
 
      left: 310px; 
 
      width: 100px; 
 
      background: #e5e5e5; 
 
     }

<div id="matrix"> 
 
     <table> 
 
      <tr> 
 
       <td>1<span>Further information 1</span></td> 
 
       <td>2<span>Further information 2</span></td> 
 
       <td>3<span>Further information 3</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td>4<span>Further information 4</span></td> 
 
       <td>5<span>Further information 5</span></td> 
 
       <td>6<span>Further information 6</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td>7<span>Further information 7</span></td> 
 
       <td>8<span>Further information 8</span></td> 
 
       <td>9<span>Further information 9</span></td> 
 
      </tr> 
 
     </table> 
 
    </div>

それは

出典

2017-03-01 09:46:05

のホープご回答いただきありがとうございます。これは、行yの位置に相対的です。常に最初の行のy位置に配置します。 – seeberg

申し訳ありませんが、あなたが疑問に思った、あなたはポップアップがホバリングされたtdと同じ高さになりたいと思った。 –

テーブルのポップアップの位置y-位置

答えて

関連する問題