Может помочь: width: 20px !important;
Но я даже на CodePen не могу повторить ваш пример так, чтобы столбец брал ширину из атрибута, так что говорю вслепую.
Вот так меняется, но в dom html остаётся width="30".
Ну дык там так и будет отображаться 30, если в HTML-разметке 30.
CSS - это язык описания внешнего вида документа, изменять с его помощью ЗНАЧЕНИЯ в HTML вы не сможете.
Тем более не понятно какую цель вы преследуете? Сделать ширину 20 вместо 30? Ну дык задайте в CSS и все, какая разница что в разметке будет 30, да хоть 1000, если в CSS вы укажите условно 20px !important?
В Mikrotik роутере в веб версии есть таблицы, колонки, которые постоянно меняют свои размеры в неудобные для меня, даже после того как я мышкой изменю до нужной ширины.
В Firefox через расширение Stylus я прописываю свои правила для нужного хоста/url.
Но после того как я прописал вышенаписанное мной правило, колонка перестала менять ширину мышкой. Она зафиксировалась в неизменяемую ширину.
Т.е. если вдруг мне всё таки понадобится изменить ширину этой колонки (а это приходится иногда делать), то я не смогу изменить её.