0

I am using anchor elemnts in an html table and want to add some padding to the top of the viewport. I figured out, that I can place the anchor in a dummy DIV element inside of the TD element to achieve this. However I also want to highlight the targets table row.

How can I achieve this without javascript?

I have tried several solutions from HTML position:fixed page header and in-page anchors, but they all do not work well in html tables.

Here is some minimal working example.

  • The "D" anchor has correct highlighting, but positioning does not work.
  • The "E" anchor has correct positioning, but no 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>
UncaughtTypeError
  • 8,226
  • 4
  • 23
  • 38
user3307752
  • 15
  • 3

2 Answers2

1

The intended behaviour can be achieved if you consider combining both the initial solutions attempted into one standard, as demonstrated by the code snippet embedded below.

  1. Create separate table-rows for your anchor points, assign your respective ids to these elements.
  2. Use the adjacent sibling combinator Ref (+) to declare your pseudo-selector :target styles
  3. Declare your anchor point table-row with absolute positioning and use margin-top property values to offset the position instead of the top property (as this will position the element n question relative to the document or the closest containing/parent element with a relative positioning)

Code Snippet Demonstration:

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>
UncaughtTypeError
  • 8,226
  • 4
  • 23
  • 38
  • This is almost, what I want. However the extra table row renders as a little extra space. How can I remove that? – user3307752 Dec 08 '17 at 19:52
  • @user3307752 It shouldn't since `position: absolute` takes the element *out of the normal document flow*, meaning it will occupy no space between or around elements. But if you could link me to an example demonstrating the issue I'll be willing to take a look for you and advise. – UncaughtTypeError Dec 09 '17 at 09:05
  • Your solution is the example. If you click on "Run code snippet" you see that there is some extra space before and after table row "D". I have also turned the solution into an HTML file and tested with various browsers, with the same result. – user3307752 Dec 09 '17 at 09:45
  • @user3307752 Oh gee, *that tiny* bit of spacing - you have a great attention to detail there, I didn't even notice that (I had to declare borders on the cells to visually emphasize it). Anyway, that seems like a `cell-spacing` issue (typical tabular formatting thing). Have you considered declaring `border-spacing: 0;` on the containing `table` element? (answer updated to demonstrate this) – UncaughtTypeError Dec 09 '17 at 10:18
  • I have not considered that, but it is a good idea. I also suggest adding `padding: 2px;` to the `td` and `th` elements, to restore the original spacing. – user3307752 Dec 09 '17 at 17:37
0

You can try below this.

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>
Saravana
  • 3,389
  • 4
  • 21
  • 37