How can I preserve the right border of a fixed column in HTML tables while scrolling?

sandbox: https://codepen.io/test41564/pen/mdzaRrV

.tableFixHead table {
  border-collapse: collapse;
  width: 100%;
}

.tableFixHead th,
.tableFixHead td {
  padding: 8px 16px;
}

td:first-child,
th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: white;
}

td:nth-child(2),
th:nth-child(2) {
  position: sticky;
  left: 40px;
  z-index: 1;
  background-color: white;
  border-right: 1px solid black;
}

.tableFixHead th {
  position: sticky;
  top: 0;
  background: #eee;
  z-index: 2
}

th:first-child,
th:nth-child(2) {
  z-index: 3
}

<div class="tableFixHead">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>01-11</th>
        <th>02-11</th>
        <th>03-11</th>
        <th>04-11</th>
        <th>05-11</th>
        <th>06-11</th>
        </th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Jack</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Michel</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Amanda</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Amanda</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
    </tbody>
  </table>
</div>

I've tried a few tricks such as trying to set:

td:nth-child(2),
th:nth-child(2) { 
  position: sticky;
  border-right: 1px solid black;
}

But this doesn't get preserved while scrolling. I've tried to use pseudo elements like ::before which I think is the key to do this but I'm unable to figure this out. I've even asked AI for help but nope, so now I'm trying stackoverflow if anyone else here knows whether this is possible.

Solution

That's because border-collapse: collapse;.

th & td share borders with their siblings.

Try border-collapse: separate;.

.tableFixHead table {
  border-collapse: separate;
  width: 100%;
}

.tableFixHead th,
.tableFixHead td {
  padding: 8px 16px;
}

td:first-child,
th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: white;
}

td:nth-child(2),
th:nth-child(2) {
  position: sticky;
  left: 40px;
  z-index: 1;
  background-color: white;
  border-right: 1px solid black;
}

.tableFixHead th {
  position: sticky;
  top: 0;
  background: #eee;
  z-index: 2
}

th:first-child,
th:nth-child(2) {
  z-index: 3
}

<div class="tableFixHead">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>01-11</th>
        <th>02-11</th>
        <th>03-11</th>
        <th>04-11</th>
        <th>05-11</th>
        <th>06-11</th>
        </th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Jack</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Michel</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Amanda</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Amanda</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
        <td>Y</td>
      </tr>
    </tbody>
  </table>
</div>