Мне сказали, что продукт разработан таким образом, чтобы поддерживать кросс-браузерную работу, поскольку таблица ведет себя по-разному в разных браузерах.
Пфф. Таблицы ведут себя не более по-разному в браузерах, чем любая другая функция.
Использование JavaScript для эмуляции макета таблицы, а не просто для использования таблицы, действительно порочно. Это будет медленнее и неуклюже, чем просто позволить браузеру сделать это, он развалится без включения JS и может плохо реагировать на масштабирование (которое в некоторых случаях нарушает offsetWidth) или ошибки округления в процентах по ширине.
В некоторых случаях может быть целесообразно использовать JavaScript для расширения макета, для трюков, которые ни таблицы, ни макет CSS не могут сделать самостоятельно, но на самом деле это не один из них.
Есть ли лучший способ сделать макет в виде таблицы для всех популярных браузеров?
Да, используйте стол. Семантическая проблема «действительно ли эта разметка представляет собой таблицу» является в значительной степени академическим вопросом. (И с вашей разметкой, говорящей о заголовках, кажется, что вы все равно можете использовать настоящую семантическую таблицу!)
Практического вреда от использования простых таблиц для разметки практически нет, если имеет смысл порядок чтения сверху вниз. Идея «таблицы по сути являются злыми» возникает как реакция на то время, когда большинство сайтов создавались с использованием ужасного беспорядка вложенных, составных и фиксированных таблиц, что приводило к нечитаемой и недоступной разметке.
Конечно, было бы идеально, если бы вы могли поместить каждый элемент страницы в элемент div и использовать CSS для позиционирования каждого элемента относительно друг друга, размера страницы и т. Д. Но реальность заключается в том, что CSS не такой мощный, и некоторые все может быть достигнуто гораздо проще с помощью небольшого консервативного использования таблицы.