Is there any way to have a tag between table-row and table-cell in a CSS table?

Question

There can be no tag between <tr> and <td> in an HTML table. (Is there a tag for grouping "td" or "th" tags?) But is there any way to have such a grouping tag that between <div>s with display: table-row and display: table-cell?

This may seem silly, but the point is that I want to add behavior like @mouseover="doSomething" or :class="{someClass: someCondition}" in a Vue.js application, and I need a tag for that. I don't want to add behavior to the whole row, and to stay DRY I would rather not add it to each cell individually.

---

Edit: HTML does not offer a solution, but in Vue I was able to get the desired result using vue-fragment. It allows to attach behaviour to the dummy <fragment> tag. Example: MatrixRLabel in MatrixR (Those are the beige labels in the upper matrix in this app.)

Answer 1

display: table-row and display: table-cell applies a certain relationship to the parent and child divs. Just like with <tr> and <td>, adding a div "in between them" obviously disrupts this relationship, and causes results I cannot meaningfully predict without a bit of research.

So yes, you will have to apply the behavior to the desired cells individually.

<tr>
    <td @mouseover="doSomething">...</td>
    <td @mouseover="doSomething">...</td>
    <td>...</td>
</tr>

Alternatively, you can identify those cells with a class and then have the behavior check for that class before executing.

<tr @mouseover="doSomething">
    <td class="onlyToMe">...</td>
    <td class="onlyToMe">...</td>
    <td>...</td>
</tr>

Since you haven't gotten an answer before this, perhaps you've figured something out yourself? Do share if you can. Cheers!