Я ищу способ сделать что-то похожее на
<table>
<tr>
<td>foo</td>
<td>baar</td>
</tr>
<tr>
<td colspan="2">foobar</td>
</tr>
</table>
но на самом деле это
<table>
<tr>
<td>foo</td>
<td>baar</td>
<td class="fakerow">foobar</td>
</tr>
</table>
Есть ли не слишком хакерский способ сделать это?
- Я бы хотел выровнять столбцы.
- Я понимаю, что наивный выбор для любой правильной разметки ограничен.
<tr><div>
- Я внедряю новую ячейку / строку с помощью JavaScript, и я хотел бы оставить ее вложенной, чтобы можно было выполнять сортировку и стилизацию.
- Желательно только по CSS.
- Предпочтительно новый ряд не имеет фиксированной высоты.
Я пробовал что-то вроде
<tr style="position: relative; padding-bottom: …">
…
<td style="display: block; position: absolute; top: 0; right: 0; bottom: 0; height: …">
но это превратилось в безумие, прежде чем что-либо даже начало работать.
Не удалось сделать это с помощью flex (по существу, переопределяя все стили display: table-*), не испортив столбцы.
возиться с моими неудачными попытками .
Может быть grid? Я еще не в курсе.