How can link two table with css pseudo-selectors?

I am trying to make two different table able to listen each other with CSS pseudo-selectors, I have a created a data table and a auto-numbered table which is different table from data table. I am trying to achieve when user hover over td of data table whole row gets highlighted along with corresponding auto-numbered row, same when user hover over td of auto-numbered row, tr of data table get highlighted along with it.

I tried few approaches like using useState but I am aiming for pure CSS solutions. If anyone have some good insights do share them.

Also if this cant be achieved with pure css, can we use event handler with pseudo selector that would be also helpful. Please share your thoughts on it too.

Codepen

.sticky-table tbody tr:hover td,
.auto-number-table tbody tr:hover td {
  background-color: #e0e0e0;
}

You could using the :has() pseudo class but it would be a lot of CSS and isn't supported in firefox. Marked up example below. The last css rule picks up where any element with a specific data-table attribute is hovered over, it highlights any table row with the same attribute value.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

table {
  border-collapse:collapse;
  margin-bottom: 1rem;
}

td {
  border: 1px solid lightgray;
  padding-inline: 0.25rem;
}

:has([data-row='1']:hover) [data-row='1'],
:has([data-row='2']:hover) [data-row='2'],
:has([data-row='3']:hover) [data-row='3'] {
  background-color:red;
}

<!-- language: lang-html -->

Data table
<table>
  <tr data-row='1'>
    <td>Row</td>
    <td>1</td>
  </tr>
  <tr data-row='2'>
    <td>Row</td>
    <td>2</td>
  </tr>
  <tr data-row='3'>
    <td>Row</td>
    <td>3</td>
  </tr>
</table>

Autonumber table
<table>
  <tr data-row='1'>
    <td>Auto Row</td>
    <td>1</td>
  </tr>
  <tr data-row='2'>
    <td>Auto Row</td>
    <td>2</td>
  </tr>
  <tr data-row='3'>
    <td>Auto Row</td>
    <td>3</td>
  </tr>
</table>

<!-- end snippet -->

Edited
I've noticed on your example that your autonumber table sits next to your data table. Why not just have them both as one table then use css to remove the styling from the 2nd column to make it look like they're two separate tables? Then you don't need JS or complex css to control the row hover effect. Example below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
}

.sticky-table {
  flex-grow: 1;
  margin-left: 10px;
  border-collapse: collapse;
  table-layout: fixed;
}

.sticky-table td:nth-child(2) {
  background-color: transparent;
}

.sticky-table th:not(:nth-child(2)),
.sticky-table td:not(:nth-child(2)) {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.sticky-table th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.sticky-table th:nth-child(2) {
  width: 10px;
}

.sticky-table th:not(:nth-child(2)) {
   background-color: #f0f0f0;
}

.sticky-table tbody tr:hover td:not(:nth-child(2)) {
  background-color: #e0e0e0;
}

.sticky-table td:first-child {
  text-align: center;
  width: 30px;
}

<!-- language: lang-html -->

<div class="container">
  <table class="sticky-table">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td></td>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
      </tr>
      <tr>
        <td>2</td>
        <td></td>
        <td>Cell 4</td>
        <td>Cell 5</td>
        <td>Cell 6</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- end snippet -->