ビューポートのHTMLテーブルにアンカーを配置する方法

Question

私はanchor elemntsをhtmlテーブルに使用していますが、ビューポートの上部にいくつかのパディングを追加します。私は、これを達成するために、TD要素の内側にダミーのDIV要素にアンカーを配置できることを理解しました。しかし、私はまた、ターゲット表の行を強調表示したい。

どうすればjavascriptなしでこれを達成できますか？

私は HTML position:fixed page header and in-page anchors、 からいくつかのソリューションを試してみましたが、それらはすべてのHTMLテーブルにうまく機能しません。

ここでは、最小限の動作例を示します。

• 「D」アンカーには正しい強調表示がありますが、位置付けは ではありません。
• "E"アンカーの位置は正しくありますが、ハイライトはありません。

tr:target { 
 
    color: #ee4444; 
 
    position: relative; 
 
    top: -40px; 
 
} 
 

 
div:target { 
 
    color: #ee4444; 
 
    position: relative; 
 
    top: -40px; 
 
}

<a href="#D">go to D</a> <a href="#E">go to E</a> 
 
<table> 
 
    <tr> 
 
    <th>Symbol</th> 
 
    <th>1932 ITU/ICAN Phonetic</th> 
 
    </tr> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>Amsterdam</td> 
 
    </tr> 
 
    <tr> 
 
    <td>B</td> 
 
    <td>Baltimore</td> 
 
    </tr> 
 
    <tr> 
 
    <td>C</td> 
 
    <td>Casablanca</td> 
 
    </tr> 
 
    <tr id="D"> 
 
    <td>D</td> 
 
    <td>Denmark</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <div id="E"></div>E</td> 
 
    <td>Edison</td> 
 
    </tr> 
 
    <tr> 
 
    <td>F</td> 
 
    <td>Florida</td> 
 
    </tr> 
 
    <tr> 
 
    <td>G</td> 
 
    <td>Gallipoli</td> 
 
    </tr> 
 
    <tr> 
 
    <td>H</td> 
 
    <td>Havana</td> 
 
    </tr> 
 
    <tr> 
 
    <td>I</td> 
 
    <td>Italia</td> 
 
    </tr> 
 
    <tr> 
 
    <td>J</td> 
 
    <td>Jerusalem</td> 
 
    </tr> 
 
    <tr> 
 
    <td>K</td> 
 
    <td>Kilogramme</td> 
 
    </tr> 
 
    <tr> 
 
    <td>L</td> 
 
    <td>Liverpool</td> 
 
    </tr> 
 
    <tr> 
 
    <td>M</td> 
 
    <td>Madagascar</td> 
 
    </tr> 
 
    <tr> 
 
    <td>N</td> 
 
    <td>New York</td> 
 
    </tr> 
 
    <tr> 
 
    <td>O</td> 
 
    <td>Oslo</td> 
 
    </tr> 
 
    <tr> 
 
    <td>P</td> 
 
    <td>Paris</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Q</td> 
 
    <td>Quebec</td> 
 
    </tr> 
 
    <tr> 
 
    <td>R</td> 
 
    <td>Roma</td> 
 
    </tr> 
 
    <tr> 
 
    <td>S</td> 
 
    <td>Santiago</td> 
 
    </tr> 
 
    <tr> 
 
    <td>T</td> 
 
    <td>Tripoli</td> 
 
    </tr> 
 
    <tr> 
 
    <td>U</td> 
 
    <td>Upsala</td> 
 
    </tr> 
 
    <tr> 
 
    <td>V</td> 
 
    <td>Valencia</td> 
 
    </tr> 
 
    <tr> 
 
    <td>W</td> 
 
    <td>Washington</td> 
 
    </tr> 
 
    <tr> 
 
    <td>X</td> 
 
    <td>Xanthippe</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Y</td> 
 
    <td>Yokohama</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Z</td> 
 
    <td>Zurich</td> 
 
    </tr> 
 
</table>

Answer 1

あなたは下に埋め込まれたコードスニペットによって示されるように、最初のソリューションの両方が、一つの標準にしようとし組み合わせて考えると意図された動作を実現することができます。

1. あなたアンカーポイントのために別々のテーブルの行を作成し、これらの要素にあなたの それぞれid Sを割り当てます。 へ
2. 使用隣接兄弟結合子^Ref（+）あなた擬似セレクタ:targetスタイル宣言
3. 位置をオフセットするabsolute位置決め 使用margin-topプロパティ値を使用してアンカーポイントテーブル行を宣言しますの代わりにの のtopのプロパティ（これは、要素nの質問を配置するので、 の相対文書からまたはrelative位置決め）

コードスニペットデモンストレーションと最も含有/親要素：

table { 
 
    border-spacing: 0; 
 
} 
 

 
.anchor-row:target + tr { 
 
    color: #ee4444; 
 
} 
 

 
.anchor-row { 
 
    position: absolute; 
 
    margin-top: -40px; 
 
}

<a href="#D">go to D</a> <a href="#E">go to E</a> 
 
<table> 
 
    <tr> 
 
    <th>Symbol</th> 
 
    <th>1932 ITU/ICAN Phonetic</th> 
 
    </tr> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>Amsterdam</td> 
 
    </tr> 
 
    <tr> 
 
    <td>B</td> 
 
    <td>Baltimore</td> 
 
    </tr> 
 
    <tr> 
 
    <td>C</td> 
 
    <td>Casablanca</td> 
 
    </tr> 
 
    <tr class="anchor-row" id="D"> 
 
    <td colspan="2"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>D</td> 
 
    <td>Denmark</td> 
 
    </tr> 
 
    <tr class="anchor-row" id="E"> 
 
    <td colspan="2"></td> 
 
    </tr> 
 
    <tr> 
 
    <td>E</td> 
 
    <td>Edison</td> 
 
    </tr> 
 
    <tr> 
 
    <td>F</td> 
 
    <td>Florida</td> 
 
    </tr> 
 
    <tr> 
 
    <td>G</td> 
 
    <td>Gallipoli</td> 
 
    </tr> 
 
    <tr> 
 
    <td>H</td> 
 
    <td>Havana</td> 
 
    </tr> 
 
    <tr> 
 
    <td>I</td> 
 
    <td>Italia</td> 
 
    </tr> 
 
    <tr> 
 
    <td>J</td> 
 
    <td>Jerusalem</td> 
 
    </tr> 
 
    <tr> 
 
    <td>K</td> 
 
    <td>Kilogramme</td> 
 
    </tr> 
 
    <tr> 
 
    <td>L</td> 
 
    <td>Liverpool</td> 
 
    </tr> 
 
    <tr> 
 
    <td>M</td> 
 
    <td>Madagascar</td> 
 
    </tr> 
 
    <tr> 
 
    <td>N</td> 
 
    <td>New York</td> 
 
    </tr> 
 
    <tr> 
 
    <td>O</td> 
 
    <td>Oslo</td> 
 
    </tr> 
 
    <tr> 
 
    <td>P</td> 
 
    <td>Paris</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Q</td> 
 
    <td>Quebec</td> 
 
    </tr> 
 
    <tr> 
 
    <td>R</td> 
 
    <td>Roma</td> 
 
    </tr> 
 
    <tr> 
 
    <td>S</td> 
 
    <td>Santiago</td> 
 
    </tr> 
 
    <tr> 
 
    <td>T</td> 
 
    <td>Tripoli</td> 
 
    </tr> 
 
    <tr> 
 
    <td>U</td> 
 
    <td>Upsala</td> 
 
    </tr> 
 
    <tr> 
 
    <td>V</td> 
 
    <td>Valencia</td> 
 
    </tr> 
 
    <tr> 
 
    <td>W</td> 
 
    <td>Washington</td> 
 
    </tr> 
 
    <tr> 
 
    <td>X</td> 
 
    <td>Xanthippe</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Y</td> 
 
    <td>Yokohama</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Z</td> 
 
    <td>Zurich</td> 
 
    </tr> 
 
</table>

Answer 2

あなたはこの下に試すことができます。

tr:target { 
    color: #ee4444; 
    position:relative; 
    top:0px; 
} 
span:target { 
    color: #ee4444; 
    position:relative; 
    top:0px; 
} 

<tr id="D"><td>D</td><td>Denmark</td></tr> 
<tr><td><span id="E">hello</span>E</td><td>Edison</td></tr>