有没有办法在 CSS table 中的 table 行和 table 单元格之间添加标签？

Question

HTML table 中的 <tr> 和 <td> 之间不能有标签。 (Is there a tag for grouping "td" or "th" tags?) 但是有没有办法在 <div> 与 display: table-row 和 display: table-cell 之间有这样一个分组标签？

这可能看起来很愚蠢，但重点是我想在 Vue.js 应用程序中添加 @mouseover="doSomething" 或 :class="{someClass: someCondition}" 之类的行为，我需要一个标签来实现它。我不想将行为添加到整行，为了保持干燥，我不想将它单独添加到每个单元格。

编辑： HTML 没有提供解决方案，但在 Vue 中我能够使用 vue-fragment。它允许将行为附加到虚拟 <fragment> 标签。示例：MatrixRLabel in MatrixR (Those are the beige labels in the upper matrix in this app.)

Answer 1

display: table-row 和 display: table-cell 将某种关系应用于父子 div。就像 <tr> 和 <td> 一样，添加 div "in between them" 显然会破坏这种关系，并导致结果我无法在不进行一些研究的情况下进行有意义的预测。

所以是的，您必须将行为应用到dividually 中的所需单元格。

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

或者，您可以用 class 识别那些单元格，然后在执行前检查 class 的行为。

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

既然你之前没有得到答案，也许你自己想通了？如果可以，请分享。干杯！

有没有办法在 CSS table 中的 table 行和 table 单元格之间添加标签？

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

html

css-tables