팝업 사이트에 따라 컬럼 사이즈 변경하는 예제 (IE에선 안된다.)

    <style>
        :host {
            @apply(--vbox-layout);
        }

        .wid50 {
            width: 50px;
        }

        .wid120 {
            width: 120px;
        }
    </style>
    

            <table validation-group="search">
                <colgroup>
                    <col class="wid120" id="col01"></col>
                    <col></col>
                    <col class="wid120" id="col02"></col>
                    <col></col>
                </colgroup>



            initialized : function()
            {
                var me = this;

                var _ro = new ResizeObserver(function(els)
                {
                    if (el.target.offsetWidth > 400)
                    {
                        me.$.col01.classList.remove("wid50");
                        me.$.col02.classList.remove("wid50");
                        me.$.col01.classList.add("wid120");
                        me.$.col02.classList.add("wid120");
                    }
                    else
                    {
                        me.$.col01.classList.remove("wid120");
                        me.$.col02.classList.remove("wid120");
                        me.$.col01.classList.add("wid50");
                        me.$.col02.classList.add("wid50");
                    }
                });

                _ro.observe(me.domHost);
                _ro.unobserve(me.domHost);
            }