Причина, по которой у вас возникают проблемы, заключается в том, что вы используете две отдельные таблицы.Таблицы корректируют ширину столбца до самого длинного непрерывного содержимого.Как Telerik делает это, они имеют четыре столбца и явно задают ширину во всех столбцах, кроме третьего.Это позволяет третьему столбцу расширяться и заполнять оставшееся пространство.
Использование table-layout:fixed поможет, но все столбцы будут равномерно распределены независимо от содержимого.Я рекомендую установить width для каждого столбца, или, что еще лучше, сделать class для каждой ширины и повторно использовать его в соответствующих столбцах.
Образец с выравниванием
Я не использую классы в своем примере, но я думаю, вы поняли идею.Я использовал overflow:hidden для th и td, чтобы убедиться, что более длинный контент не отображается над другими ячейками таблицы.Я также думаю, что визуальный эффект таблицы работает лучше: меньшее количество столбцов, семь или восемь столбцов, может быть немного излишним, но это мое личное мнение.