column 오른쪽 끝에 빈공간 생기는 이유 와 없애는 방법

오른쪽 끝은 없는 컬럼인데 생기네요…
width 를 px 단위로 하면 오른쪽 저렇게 여백 컬럼이 안생기는데…
저는 %로 하고싶은데 이 부분은 어떻게 해결방법없을까요?~

grContentGrid.setConfig({
    target: $('[data-ax5grid="grContent-grid"]'),
    header: {
        align: "center",
        columnHeight: 30
        
    },
    columns: [				
        {key: "PBAN_INSTT_CODE_NM", label: "기관명칭", sortable: true,  width: "10%",   align: "left"},    
        {key: "FA_SC_NM", label: "시설구분",  width: "10%", sortable: true, align: "center"},
        {
        	label: "${BEFORE_PBAN_YR}년", width: "40%",  columns: [
                {key: "BEFORE_SPCE_FGR", label: "실수", width: "20%", sortable: true, align:"right"},
                {key: "BEFORE_TOT_SECR_LDAR", label: "종확보면적(m)", sortable: true, width: "20%",  align:"right"}
            ]
        },
        {
        	label: "${PBAN_YR}년", width: "40%",  columns: [
                {key: "SPCE_FGR", label: "실수", width: "20%", sortable: true,  align:"right"},
                {key: "TOT_SECR_LDAR", label: "종확보면적(m)", sortable: true, width: "20%",  align:"right"}
            ]
        }
    ],        
    body: {
    	mergeCells: ["PBAN_INSTT_CODE_NM"],
    	columnHeight: 35,
    	onDBLClick: function(){
		     // default   		
        }
    }
});

오른쪽 맨 끝영역은 테이블이 컬럼 너비만큰 출력되고 남는 부분을 커버하기 위해서 만든 것인데요.
지금예제에서 처럼 꽉 차는 테이블을 표현하시려면

https://codepen.io/thomasJang/pen/BbxrbZ

여기에서 처럼 너비값을 가변폭으로 가질 컬럼의 너비를 "*"으로 설정하시면 되는데요.
하지만 이렇게 하면 리사이즈 까지 자동 재계산 하지는 않습니다.

네 답변에 도움이 되었습니다^^ 감사합니다!