Positioning Anchors in HTML Tables within the Viewport: A Comprehensive Guide

I am utilizing anchor elements within an HTML table and aiming to incorporate some spacing at the top of the viewport. I have discovered that by placing the anchor inside a dummy DIV element within the TD, I can achieve this. However, my goal is also to highlight the target table row.

Is there a way to accomplish this without relying on JavaScript?

I've experimented with various solutions sourced from HTML position:fixed page header and in-page anchors, but none of them seem to work well within HTML tables.

Below is a brief working example:

  • The "D" anchor highlights correctly but has issues with positioning.
  • The "E" anchor positions properly but lacks highlighting.

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

To achieve the desired outcome, it is recommended to merge the initial solutions attempted into a single standard approach, as illustrated in the following code snippet.

  1. Start by creating separate table rows for your anchor points and assigning corresponding IDs to these elements.
  2. Utilize the adjacent sibling combinator (+) along with the pseudo-selector :target to define the styles for your target elements.
  3. Position the anchor point table row absolutely and adjust its position using margin-top values instead of top property for relative positioning within the document or containing/parent element with relative positioning.

Demonstration of Code Snippet:

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>
   <!-- Additional table rows omitted for brevity -->
</table>

Answer №2

Feel free to experiment with the following code.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhance your product listings in Opencart 2.0 by adding supplementary images alongside the main product image

Can someone assist me with moving additional product images next to the main product image in the default opencart 2.0.1.1 theme? Currently, they are appearing below the product image and I would like them to be displayed alongside it instead. ...

The background video on the website is having trouble resizing properly to fit the screen dimensions

I'm new to coding and I'm attempting to incorporate a background video on the homepage. The issue arises when I resize my window or view it on a mobile device, as the video fails to adjust to the window size, causing side scrolling that reveals t ...

Tips for customizing the appearance of Angular Material select drop down overlay

In my project, there is an angular component named currency-selector with its dedicated css file defining the styling as shown below: .currency-select { position: absolute; top: 5px; right: 80px; z-index: 1000000; color: #DD642A; f ...

What is the best way to include a maximum height in my ScrollToBottom element?

I am currently attempting to limit the maximum height of my component as adding user messages causes it to expand and stretch the whole page. However, I have been unsuccessful in setting a maxHeight property for the component. I am utilizing ScrollToBottom ...

The size of the dropdown adjusts according to the changes in the page size

Can anyone help me with an issue I'm facing in my form? Whenever I zoom in or out on my browser, the select element within the form gets resized and changes its position. Any suggestions would be greatly appreciated. Below is the code snippet for refe ...

I need to remove the mobile view of my Angular application because it is not optimized for smaller screens

I have implemented Angular in my web application, but unfortunately it is not mobile responsive. In order to address this issue, I would like to disable the mobile view and instead display a message informing users that mobile view is not supported for t ...

Revamp the Bootstrap Carousel Control by replacing the default navigation arrows with stylish arrows featuring circle backgrounds

Looking to update the appearance of the carousel icons in Bootstrap 4? How about changing them from simple arrows to arrows with dark semi-opaque circles underneath? If you're wondering how to achieve this modification, keep in mind that the icons ar ...

Align a series of divs in the center with variable width and height

I have a dilemma with my large div that contains multiple thumbnails. I am looking to center the thumbnails within the div and have the overall div centered on the page. Additionally, I want the width of the div to be flexible so that all thumbnails can be ...

Contrasting flexbox overflow handling in React versus React Native

As a beginner in React Native, I have a query about achieving a flex layout with two child containers. The goal is to ensure that if one child's content overflows, the other child shrinks accordingly. In standard HTML/CSS, I was able to achieve this: ...

Category-Specific Page Display

Can anyone help with CSS coding using Wordpress Elementor to make a page only display posts from the coaching category? I attempted to use this selector article.type-post:not(.category-coaching) { display: none; }, but it doesn't seem to be functi ...

Tips for aligning div columns in HTML and CSS

My divs are displaying different heights based on content. I need a solution to make them all the same height without using bootstrap framework. Is there a way to achieve this with plain html/css, or perhaps with javascript/jquery/angularjs? Take a look ...

having trouble with changing the button's background color via toggle

I've been experimenting with toggling the background color of a button, similar to how changing the margin works. For some reason, the margin toggles correctly but the button's color doesn't. <script> let myBtn = document.querySele ...

What is the best way to trigger a jQuery function after adding a <div> element through Ajax loading?

When I use Ajax to append a <div>, the dynamic inclusion of jQuery functions and CSS for that particular <div> does not seem to work. The insertion is successful, but the associated jQuery functions and CSS do not load properly. How can this be ...

Responsive columns with maximum width in Bootstrap

Currently, I'm working on coding a portion of a single-page responsive Bootstrap layout that features two columns of text placed side by side. The request from the designer is for these columns to have a maximum width, but to be centered until they hi ...

Tips for avoiding anchor tag text from being split across two lines when resizing

One issue I am facing is with an anchor tag that displays the name of the logged-in person. The problem arises when resizing the browser window, causing the name to split across two lines. Is there a way to prevent this from happening? ...

Toggling in JS does not alter the DIV element

I attempted to utilize Bootstrap toggle to modify the div HTML content similar to the example shown at with a slight modification, but unfortunately, it did not function as expected due to a discrepancy in my current JavaScript code. I am unsure of what I ...

What is preventing SVG textPath from displaying properly? [Empty output in devtools]

I found this interesting code snippet on Mozilla and decided to incorporate it into a Vue component. <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path id="MyPath" fill="none" stroke="red" d="M10,90 Q90,90 90,45 Q90,10 ...

A blank screen of errors pops up when attempting to update through a form

Encountering a white error screen when attempting to add an item using a form in Python / Django. I'm currently debugging the issue but lacking information. Any guidance on where to look next would be greatly appreciated.https://i.sstatic.net/daavn.pn ...

Angular 7 - Customize Mat-select-value color depending on a specific condition

One issue I am facing is changing the color of a selected value in a mat select based on a condition. This change should be visually apparent to the user. Although accessing mat-select-value from the styles is possible, implementing a condition using ng-cl ...

Unable to apply 3rd condition with ngClass into effect

I've been attempting to incorporate a third condition into my ngClass. Initially, I managed to get two classes working in my ngClass to change the row colors alternately. [ngClass]="{ totalrow:i%2 != 0, odd:i%2 == 0}" Now, I'm trying to introdu ...