fix: 테이블이 main element 폭을 초과하는 문제 수정 #471
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
## Description 문서 페이지의 테이블이 main element의 폭을 초과하여 오른쪽 일부가 가려지는 문제를 수정합니다. ### 문제 현상 - main element의 폭(832px)보다 테이블의 실제 콘텐츠 폭(1557px, 920px)이 더 넓게 렌더링됨 - thead의 첫 번째 행은 main element 폭에 맞게 그려지지만, tbody의 이후 행들은 더 넓게 그려짐 - 테이블 오른쪽 일부가 가려져서 내용을 확인할 수 없음 ### 해결 방안 - `globals.css`에 테이블 스타일 규칙 추가: table을 `display: block`으로 설정하고 `overflow-x: auto` 적용 - `table-width-fix.tsx` 컴포넌트 추가: thead의 열 너비를 계산하여 tbody의 모든 행에 동일하게 적용 - `layout.tsx`에 `TableWidthFix` 컴포넌트 추가하여 모든 페이지에서 자동 실행 ## Additional notes - 총 3개 파일 변경 (165줄 추가, 1줄 삭제) - GFM 마크다운 테이블과 HTML 테이블 모두 지원 - 윈도우 리사이즈 시에도 열 너비 동기화 유지
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
문제가 되던 페이지의 주소는 어디인가용? |
keIIy-kim
approved these changes
Dec 18, 2025
Contributor
Author
Contributor
Author
|
부작용이 좀 있네요. 일단.. 보류...? https://querypie-docs-git-jk-fix-css-for-table-querypie.vercel.app/ko/user-manual |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
문서 페이지의 테이블이 main element의 폭을 초과하여 오른쪽 일부가 가려지는 문제를 수정합니다.
문제 현상
해결 방안
globals.css에 테이블 스타일 규칙 추가: table을display: block으로 설정하고overflow-x: auto적용table-width-fix.tsx컴포넌트 추가: thead의 열 너비를 계산하여 tbody의 모든 행에 동일하게 적용layout.tsx에TableWidthFix컴포넌트 추가하여 모든 페이지에서 자동 실행Additional notes