CSS pointer-events to disable clicks on underlying elements too

I want to disable the behavior from triggering the hovering on the tr tags, specifically on the space that has the word "COLUMNA".

Strangely, Google Chrome apparently disabled clicking of underlying elements, you can run the code on Chrome and it has the exact behavior that I need, but on Firefox it does fire hovering when I put the cursor over the space that has the word "COLUMNA".

How would I approach this to make the behavior shown on Chrome, but on FireFox?

Here is my code:

.formato {
  border: 1px solid #000;
  border-collapse: collapse;
  margin-left: 100px;
  margin-bottom: 100px;
}
.formato th,
.formato td {
  border: 1px solid #000;
  padding: 20px;
}
.formato tr:hover td:not(.columna):not(.filas):not(.pie):not(.celda) {
  background: #ccc;
  cursor: pointer;
}
.columna,
.filas,
.pie,
.celda {
  pointer-events: none;
}
.formato td:not(.columna):not(.filas):not(.pie):not(.celda):hover {
  background: #000 !important;
  color: #fff;
}

<table class="formato">
  <caption>TITULO DE LA TABLA</caption>
  <!--La etiqueta <caption> define el título de una tabla. Esta etiqueta debe ser ubicada inmediatamente despué de la etiqueta de apertura <table>-->
  <thead>
    <!--Se declara semanticamente q es una cabecera de la tabla-->
    <tr>
      <th>cabecera de celda 1</th>
      <!--La etiqueta <th> define una celda de encabezado de una tabla. El texto de esta celda se representa en negrita y centrado.-->
      <th>cabecera de celda 2</th>
      <th>cabecera de celda 3</th>
      <th>cabecera de celda 4</th>
      <th>cabecera de celda 5</th>
    </tr>
  </thead>

  <tfoot>
    <!--Se declara semanticamente q es el pie de la tabla y siempre va antes del tbody-->
    <tr>
      <td colspan="5" class="pie">PIE DE TABLA</td>
    </tr>
  </tfoot>

  <tbody>
    <!--Se declara semanticamente q es el cuerpo de la tabla-->
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
      <td rowspan="5" class="columna">COLUMNAS</td>
      <!--rowspan indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila-->
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td colspan="5" class="filas">FILAS</td>
      <!--colspan indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna-->
      <td class="celda">CELDA</td>
    </tr>
  </tbody>
</table>

Solution

Firefox displays the desired behaviour when pointer events are disabled on tr and enabled on td with the value of auto, like this:

tr {
    pointer-events: none;
}
td {
    pointer-events: auto;
}

Working Example

.formato {
  border: 1px solid #000;
  border-collapse: collapse;
  margin-left: 100px;
  margin-bottom: 100px;
}
.formato th,
.formato td {
  border: 1px solid #000;
  padding: 20px;
}
.formato tr:hover td:not(.columna):not(.filas):not(.pie):not(.celda) {
  background: #ccc;
  cursor: pointer;
}
.columna,
.filas,
.pie,
.celda {
  pointer-events: none;
}
.formato td:not(.columna):not(.filas):not(.pie):not(.celda):hover {
  background: #000 !important;
  color: #fff;
}
tr {
  pointer-events: none;
}
td {
  pointer-events: auto;
}

<table class="formato">
  <caption>TITULO DE LA TABLA</caption>
  <!--La etiqueta <caption> define el título de una tabla. Esta etiqueta debe ser ubicada inmediatamente despué de la etiqueta de apertura <table>-->
  <thead>
    <!--Se declara semanticamente q es una cabecera de la tabla-->
    <tr>
      <th>cabecera de celda 1</th>
      <!--La etiqueta <th> define una celda de encabezado de una tabla. El texto de esta celda se representa en negrita y centrado.-->
      <th>cabecera de celda 2</th>
      <th>cabecera de celda 3</th>
      <th>cabecera de celda 4</th>
      <th>cabecera de celda 5</th>
    </tr>
  </thead>

  <tfoot>
    <!--Se declara semanticamente q es el pie de la tabla y siempre va antes del tbody-->
    <tr>
      <td colspan="5" class="pie">PIE DE TABLA</td>
    </tr>
  </tfoot>

  <tbody>
    <!--Se declara semanticamente q es el cuerpo de la tabla-->
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
      <td rowspan="5" class="columna">COLUMNAS</td>
      <!--rowspan indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila-->
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td colspan="5" class="filas">FILAS</td>
      <!--colspan indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna-->
      <td class="celda">CELDA</td>
    </tr>
  </tbody>
</table>