How can I align a horizontally scrolling div to the right?

Question

On a mobile website I have a series of table cells that act as breadcrumb navigation links.

It starts off left-aligned, then each time you go another branch deeper into the navigation, it adds another td to the right-hand end. The table is set to allow the horizontal overflow to scroll, so the entire navigation trail is accessible without taking up too much vertical space.

What I'd like is when the width of the table exceeds the viewport, the horizontal scroll should align to the right-hand end, so the current navigation level is visible. At the moment it stays aligned to the left unless manually scrolled.

I've tried experimenting with float and margin to no avail.

Please does anyone have any suggestions?

Edit - more lines added to snippet to illustrate issue.

.bcnavbar {
  display: block;
  border-collapse: separate;
  border-spacing: 0px;
  max-width: fit-content;
  overflow-x: scroll;
 /* scrollbar-width: none; */
  white-space: nowrap;
  padding-bottom: 5px;
}

.bcnavbar::-webkit-scrollbar {
   /*   display: none; */
}

.bcnav1 {
  width: fit-content;
  padding: 2px 20px 2px 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  color: #900;
  text-shadow: none;
  border: 2px solid #006;
  border-left: none;
  border-right: none;
  background: url('images/mobile/navdivider.png') #eee no-repeat right center;
  box-shadow: 4px 4px 3px #999;
}

.bcnav2 {
  width: fit-content;
  padding: 2px 18px 2px 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  color: #900;
  text-shadow: none;
  border-top: 2px solid #006;
  border-bottom: 2px solid #006;
  background: url('images/mobile/navdivider.png') #eee no-repeat right center;
  box-shadow: 4px 4px 3px #999;
}

.bcnav3 {
  width: fit-content;
  padding: 2px 10px 2px 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  color: #900;
  text-shadow: none;
  background-color: #eee;
  border: 2px solid #006;
  border-left: none;
  border-radius: 0px 15px 15px 0px;
  box-shadow: 4px 4px 3px #999;
}

.bcnavspacer {
  width: 2px;
}

<table class="bcnavbar">
  <tr>
    <td class="bcnav1"><a class="bcnavlink" href="index.php" data-ajax="false">Home</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 1</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 2</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 3</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 4</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 5</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 6</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">5 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">4 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">3 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">2 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">1 level above</a></td>
    <td class="bcnav3">Current Page</td>
    <td class="bcnavspacer">&nbsp;</td>
  </tr>
</table>

Answer 1

I figured out a way to do it (so long as the div in question is loading within the visible viewport that you want to load the page to), thanks to Javascript's ScrollIntoView function:

function navcentre() {
      var navdiv = document.getElementById("finalnav");
      navdiv.scrollIntoView({
        behavior: "smooth",
        block: "center",
        inline: "center"
      })
    }

.bcnavbar {
      display: block;
      border-collapse: separate;
      border-spacing: 0px;
      max-width: fit-content;
      overflow-x: scroll;
     /* scrollbar-width: none; */
      white-space: nowrap;
      padding-bottom: 5px;
    }

    .bcnavbar::-webkit-scrollbar {
       /*   display: none; */
    }

    .bcnav1 {
      width: fit-content;
      padding: 2px 20px 2px 5px;
      text-align: center;
      vertical-align: middle;
      font-size: 12px;
      color: #900;
      text-shadow: none;
      border: 2px solid #006;
      border-left: none;
      border-right: none;
      background: url('images/mobile/navdivider.png') #eee no-repeat right center;
      box-shadow: 4px 4px 3px #999;
    }

    .bcnav2 {
      width: fit-content;
      padding: 2px 18px 2px 5px;
      text-align: center;
      vertical-align: middle;
      font-size: 12px;
      color: #900;
      text-shadow: none;
      border-top: 2px solid #006;
      border-bottom: 2px solid #006;
      background: url('images/mobile/navdivider.png') #eee no-repeat right center;
      box-shadow: 4px 4px 3px #999;
    }

    .bcnav3 {
      width: fit-content;
      padding: 2px 10px 2px 5px;
      text-align: center;
      vertical-align: middle;
      font-size: 12px;
      color: #900;
      text-shadow: none;
      background-color: #eee;
      border: 2px solid #006;
      border-left: none;
      border-radius: 0px 15px 15px 0px;
      box-shadow: 4px 4px 3px #999;
    }

    .bcnavspacer {
      width: 2px;
    }

<body onload="navcentre()";>
<table class="bcnavbar">
  <tr>
    <td class="bcnav1"><a class="bcnavlink" href="index.php" data-ajax="false">Home</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 1</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 2</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 3</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 4</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 5</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 6</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">5 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">4 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">3 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">2 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">1 level above</a></td>
    <td class="bcnav3">Current Page</td>
    <td class="bcnavspacer" id="finalnav">&nbsp;</td>
  </tr>
</table>
</body>

Answer 2

I have added follwing additional CSS into your CSS

.bcnavbar {
  direction: rtl;
}

.bcnavbar tr,
.bcnavbar td {
   -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

Please check following code snippet, I hope this will fullfill your need.

.bcnavbar {
  display: block;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  max-width: fit-content;
  overflow-x: scroll;
 /* scrollbar-width: none; */
  white-space: nowrap;
  padding-bottom: 5px;
  direction: rtl;
}

.bcnavbar tr,
.bcnavbar td {
   -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.bcnavbar::-webkit-scrollbar {
   /*   display: none; */
}

.bcnav1 {
  width: fit-content;
  padding: 2px 20px 2px 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  color: #900;
  text-shadow: none;
  border: 2px solid #006;
  border-left: none;
  border-right: none;
  background: url('images/mobile/navdivider.png') #eee no-repeat right center;
  box-shadow: 4px 4px 3px #999;
}

.bcnav2 {
  width: fit-content;
  padding: 2px 18px 2px 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  color: #900;
  text-shadow: none;
  border-top: 2px solid #006;
  border-bottom: 2px solid #006;
  background: url('images/mobile/navdivider.png') #eee no-repeat right center;
  box-shadow: 4px 4px 3px #999;
}

.bcnav3 {
  width: fit-content;
  padding: 2px 10px 2px 5px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
  color: #900;
  text-shadow: none;
  background-color: #eee;
  border: 2px solid #006;
  border-left: none;
  border-radius: 0px 15px 15px 0px;
  box-shadow: 4px 4px 3px #999;
}

.bcnavspacer {
  width: 2px;
}

<table class="bcnavbar">
  <tr>
    <td class="bcnav1"><a class="bcnavlink" href="index.php" data-ajax="false">Home</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 1</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 2</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 3</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 4</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 5</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">Link 6</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">5 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">4 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">3 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">2 levels above</a></td>
    <td class="bcnav2"><a class="bcnavlink" href="link.php" data-ajax="false">1 level above</a></td>
    <td class="bcnav3">Current Page</td>
    <td class="bcnavspacer">&nbsp;</td>
  </tr>
</table>