Why doesn't the anchor link work on the word inside of the a-Element?

Question

I have a table, that I use as Nav/Side-Bar with one section of my content-container per tr and td and the section-word itself is inside an a Element. (I also used bootstrap-classes for the HTML in general)

Now the link does works on the tr/td, but not at the word itself. But I would like the link to work on the whole row as well as on the word itself. Can someone explain why that happens?

Here my code (of course with more rows in reality):

<div class="col-md-3 col-sm-3 posChild bd-sidebar justify-content-start">

          <nav id="navbar-example3"
            class="navbar sticky navbar-light flex-column justify-content-center align-items-start p-3 gy-3 sidebar d-flex"> ```
            <table>
              <table class="table">
                <thead>
                  <tr>
                    <th scope="col">Sections</th>
                  </tr>
                </thead>
              <tbody>
                <tr>
                  <td>
                    <a class="nav-link" href="#sectionID">Some Section-Word</a>
                  </td>
                </tr>
              </tbody>
            </table>
           </nav>
</div>

This is the targeted Element:

<a id="sectionID"></a>

<div>Some Section...</div>

These are the used css-classes:

.bd-sidebar {
  grid-area: sidebar;
}

.posChild {
  position: sticky;
  top: 0px;
}

.sidebar { 
 height: 100vh;
}

.navbar.sticky{
  position: sticky; top: 50px;
}