Combining anchor-offset and target-styling on a html-table

Asked Jun 03 '19 at 20:45

Active Jun 03 '19 at 21:42

Viewed 157 times

I'm trying to combine an anchor-offset with an anchor-target-style on a table-row.

Having the anchor-ID applied to the table row and styling it via 'tr:target td' does achieve the desired look, while the solutions provided here ( offsetting an html anchor to adjust for fixed header ) achieve the desired offset, but only for text.

I can't use the top-voted solution as it requires the "display: block"-attribute which is incompatible to the tr-tag as far as I know. If somehow possible I would prefer a only css/html solution

The structure I use:

<table>
<tr id="anchor-target1"> <td> Something </td> </tr>
<tr id="anchor-target2"> <td> Something </td> </tr>
</table>

Update: JSFiddle-Example. Goal is to combine both functions: https://jsfiddle.net/7rknaqwu/5/

edited Jun 03 '19 at 21:42

asked Jun 03 '19 at 20:45

Oromis

Could you perhaps do the adjustment to the table instead of the rows? – abney317 Jun 03 '19 at 20:52
This way I can only target the whole table and not the single rows, as the way shown in the thread I linked simply moves the whole target to achieve an anchor-offset – Oromis Jun 03 '19 at 20:58
I'd need to see a more complete example to see the problem. – abney317 Jun 03 '19 at 21:00
Example for tr-Highlighting: `Anchor Target 1
Anchor Target 2

Content1A Content1B

Content2A Content2B

` – Oromis Jun 03 '19 at 21:22
Example for offset using span-elements: `Anchor Target 1
Anchor Target 2

Content1A Content1B

Content2A Content2B

CSS: tr:target td{ background-color: red;} a.anchor { display: block; position: relative; top: -15px; visibility: hidden;}` – Oromis Jun 03 '19 at 21:25
You should provide an example of the actual problem in your original question. I don't believe the comments you've added reproduce your issue entirely. – abney317 Jun 03 '19 at 21:27

Content1A	Content1B
Content2A	Content2B

Content1A	Content1B
Content2A	Content2B

Combining anchor-offset and target-styling on a html-table

0 Answers0