Есть ли способ иметь тег между таблицей-строкой и таблицей-ячейкой в ​​таблице CSS? - PullRequest
Новая
       7

Есть ли способ иметь тег между таблицей-строкой и таблицей-ячейкой в ​​таблице CSS?

0 голосов
/ 31 октября 2018

В таблице HTML не может быть тега между <tr> и <td>. ( Есть ли тег для группировки тегов "td" или "th"? ) Но есть ли способ создать такой тег группировки, который находится между <div> s и display: table-row и display: table-cell?

Это может показаться глупым, но дело в том, что я хочу добавить поведение, подобное @mouseover="doSomething" или :class="{someClass: someCondition}", в приложении Vue.js, и мне нужен тег для этого. Я не хочу добавлять поведение ко всей строке, и чтобы оставаться СУХИМ, я бы не стал добавлять его в каждую ячейку отдельно.

Редактировать: HTML не предлагает решения, но в Vue я смог получить желаемый результат, используя vue-фрагмент . Позволяет прикрепить поведение к фиктивному тегу <fragment>. Пример: MatrixRLabel в MatrixR (Это бежевые метки в верхней матрице в в этом приложении .)

1 Ответ

0 голосов
/ 02 ноября 2018

display: table-row и display: table-cell применяют определенные отношения к родительским и дочерним элементам div. Как и в случае с <tr> и <td>, добавление div "между ними", очевидно, нарушает эту связь и приводит к результатам, которые я не могу предсказать, не потратив немного времени на исследования.

Так что да, вам придется применить поведение к нужным ячейкам индивидуально. 

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

Либо вы можете идентифицировать эти ячейки с помощью класса, а затем выполнить проверку поведения для этого класса перед выполнением. 

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

Поскольку до этого вы не получили ответа, возможно, вы сами что-то выяснили? Делитесь, если можете. Ура! * * 1013

...