Как решить проблему с row/colspan?

Question

[JackShcherbakov]

Здравствуйте! Допустим это наша таблица (* - клетка таблицы (элемент TD))

*  *  *  *  *  *  *  *  *  *

*  *  *  *  *  *  *  *  *  *

*  *  *  *  *  *  *  *  *  *

То есть наша таблица имеет размеры 10 на 3. Эту таблицу генерирует определённый JS код. В моей программе есть функции "объединение по горизонтали/вертикали", при применении которых таблица обретает такое вид:

*  *  *  *  *  *  *  *  *  *

*  *    *  *  *  *  *  *  *
      *                           //(1)
*  *    *  *  *  *  *  *  *  * //(2)

1 - тут ячейка номер 3 во второй строке накладывается на ячейку номер 3 в последней строчке, что и вызывает сдвиг
2 - тут вылезает ячейка
Что самое плохое, так это то, что ячейки, на которые накладываются другие ячейки не удаляются, а просто сдвигают остальные! Так более того, у такой кривой таблицы остаются те же размеры (10 на 3), что просто делает невозможным без костылей отсечь лишнее!

Что предложите? Какие идеи?
UPD:
Ладно уж, выложу код - https://jsfiddle.net/tu3x7b3d/show/
Для манипулирования таблицей кликнеите по любой ячейке - выйдет диалоговое окно
P.s - приложение еще на 10% даже не сделано. Это просто набросок

Answer 1

[Антон Спирин]

Посмотрите как это реализовано в правильных инструментах.

1. В таблице должна быть возможность выделить ячейки.
2. По клику на кнопку объединить, удаляете выделенные, заменяя одной большой. Можно даже контент сохранить.
А так как вы хотите реализовать, во-первых неудобно пользователю, во-вторых усложняет реализацию.