이전에 글을 남겼는데.. 다시 남깁니다...

vitualization table을 구현하고 있는데. 테이블 header의 th width, tbody의 td width가 오차가 있어서 질문 남깁니다.

table의 모든 컬럼 width는 '%'로 주었습니다. 

header의 width는 소수점을 제외한 정수로 너비가 잡히는 반면, tbody의 td width는 소수점이 포함된 실수로 너비가 잡혀서 헤더 컬럼과 바디 너비사이에 0.x의 오차가 생깁니다...

*문제점

1)브라우저창의 너비를 조절할 경우 th, td 너비가 틀어집니다.

2) tbody의 td에 소수점이 생겨서 테이블에 가로 스크롤이 생기는 경우가 생깁니다...

3)맨처음 화면에 떴을 땐 th width, td width가 동일하게 나오는데, 브라우저창 너비를 조절하면
th %값, td%이 바뀌면서 td에 소수점이 생깁니다..

 
테이블 구조와, 테이블 너비 오차 이미지 첨부하겠습니다.

고수님들 답변 부탁드립니다.

페이지 싸이트:

https://codesandbox.io/s/infallible-sanne-tf525?file=/src/App.js