코스모스팜 스레드
table th, td width 틀어짐 질문이요.
안녕하세요.
vitualization table을 구현하고 있는데. 테이블 header의 th width, tbody의 td width가 오차가 있어서 질문 남깁니다.
table의 모든 컬럼 width는 '%'로 주었습니다.
header의 width는 소수점이 제외한 정수로 너비가 잡히는 반면, tbody의 td width는 소수점이 포함된 실수로 너비가 잡혀서 헤더 컬럼과 바디 너비사이에 0.x의 오차가 생깁니다...
*추가로, tbody의 td에 소수점이 생겨서 테이블에 가로 스크롤이 생기는 경우가 생깁니다...
그리고..
맨처음 화면에 떴을 땐 th width, td width가 동일하게 나오는데, 브라우저창 너비를 조절하면
th %값, td%이 바뀌면서 td에 소수점이 생깁니다..
테이블 구조와, 테이블 너비 오차 이미지 첨부하겠습니다.
고수님들 답변 부탁드립니다.
페이지 싸이트:
https://codesandbox.io/s/infallible-sanne-tf525?file=/src/App.js
-
gildong (5 Point)ㆍ2021.03.08 15:13
답변감사합니다.
테이블 가상화 때문에 position: absolute로 하고, flex로 했습니다..
-
스레드봇 (31061 Point)ㆍ2021.03.08 12:35
안녕하세요.
올려주신 페이지 주소로 확인해보면
tr 태그에 position: absolute 속성이나 display: flex 속성이 추가되어 있는데요.
tr 태그에 외에 다른 태그에도 반드시 필요한 속성이 아니라면 제거하시는 게 좋을 듯합니다.
고맙습니다.
-
gildong (5 Point)ㆍ2021.03.05 17:10
맨처음 화면에 떴을땐 th width, td width가 동일하게 나오는데, 브라우저창 너비를 조절하면
th %값, td%이 바뀌면서 td에 소수점이 생깁니다...ㅠ
-
스레드봇 (31061 Point)ㆍ2021.03.05 16:54
올려주신 페이지 주소로 확인해보니
저희 쪽에서는 너비가 모두 동일하게 표시되고 있습니다.
https://imgur.com/a/jKgUi7d
https://imgur.com/a/aJFHAiK혹시 어떤 브라우저로 확인하셨는지요?
저희는 크롬 브라우저에서 확인을 해봤지만 별 다른 문제를 확인하지 못했습니다.
만약, 해당 코드가 사이트에 적용됐을 때 문제가 생긴다면
다른 CSS 코드 문제는 아닌지 확인해보셔야 할 듯합니다.
고맙습니다.
-
gildong (5 Point)ㆍ2021.03.05 14:58
우선 답변 감사합니다.
https://codesandbox.io/s/infallible-sanne-tf525?file=/src/App.js
위 싸이트에서 페이지를 확인 할 수 있습니다. 감사합니다.
-
스레드봇 (31061 Point)ㆍ2021.03.05 14:42
안녕하세요~^^
올려주신 내용만으로는 원인을 파악하기 어렵습니다.
CSS 코드 관련해서는 페이지를 직접 봐야 도움을 드릴 수 있습니다.
비회원으로도 확인 가능한 페이지 주소 알려주시면 살펴보겠습니다.
고맙습니다.
