워드프레스 구텐베르크 블록 편집기에서는 테이블을 쉽게 삽입할 수 있습니다. 그런데 너비가 좁은 화면에서는 반응형이 적용되어 텍스트 줄바꿈이 되고 테이블이 길어지는 것을 볼 수 있습니다. (아래 사진 참고) 그래서 테이블 가로 스크롤을 만들어 표의 원래 모습을 그대로 유지하도록 적용해 보았습니다.
모바일 환경이나 PC에서 화면을 줄였을 경우 가로 스크롤이 나타나게 하는데에는 CSS 코드 몇 줄만 추가하면 됩니다.
테이블 가로 스크롤 만들기
디자인 → 테마 파일 편집기 → 차일드 테마 CSS 또는
디자인 → 사용자 정의하기 → 추가 CSS에 다음 코드를 추가하기만 하고 저장합니다.
/* 워드프레스 테이블 가로 스크롤 */
@media (max-width: 1200px) {
.wp-block-table {
overflow-x: scroll;
}
.wp-block-table table {
min-width: 750px;
}
}
Note
@media (max-width: 1200px): 이 부분은 화면 너비가 1200픽셀 이하일 때만 중괄호 안에 있는 코드를 적용한다는 의미입니다. 즉, 데스크톱 화면 1200픽셀 이상 에서는 이 코드가 적용되지 않습니다.overflow-x: scroll;: 이 속성은 테이블의 너비가 화면 너비보다 클 경우 가로 스크롤바를 표시하도록 합니다. 즉, 테이블 내용이 화면 너비를 넘어갈 경우 사용자가 테이블을 가로로 스크롤하여 전체 내용을 볼 수 있도록 하였습니다.min-width: 750px;: 이 속성은 테이블의 최소 너비를 750픽셀로 설정합니다. 즉, 테이블 너비가 750픽셀 미만이 되지 않도록 합니다. 화면 너비가 작은 기기에서 테이블이 너무 좁아지거나 깨지는 것을 방지하기 위해서 추가해 주었습니다.
★ 위 설정값들은 자신의 워드프레스 테마의 콘텐츠 너비에 맞게 값을 조정해야 할 수도 있습니다.
구텐베르크 테이블 블록은 단순하고 심플한 표를 만들기에 적합합니다. 만약 셀병합 등을 이용한 복잡한 구조의 표를 만들어야 하거나, 방문자 정렬 등의 기능을 사용하고 싶다면 TablePress 와 같은 플러그인을 사용해야 합니다.