0

반응형 HTML 테이블 생성기 - 모바일 스크롤

셀을 클릭하고 입력하여 HTML 테이블을 시각적으로 구축합니다. 붙여넣거나 변환할 형식이 없는 실시간 미리 보기를 통해 깔끔하고 의미 있는 테이블 마크업을 얻을 수 있습니다.

넓은 테이블이 좁은 화면에서 페이지 레이아웃을 깨뜨리지 않도록 테이블을 스크롤 가능한 컨테이너에 래핑합니다.
처리 중... 0%

결과

이 페이지에서는 7열로 구성된 넓은 샘플이 이미 채워져 있고 반응형 래퍼가 이미 켜져 있는 테이블 작성기가 열리므로 수정 사항이 즉시 실행되는 것을 볼 수 있습니다.

넓은 표는 일반 반응형 CSS가 리플로우할 수 없는 몇 가지 요소 중 하나입니다. 즉, 텍스트는 줄바꿈되지만 열은 그렇지 않습니다. 따라서 6개 이상의 열이 있는 표는 화면을 넘치거나 휴대폰에서 읽을 수 없을 정도로 작은 모든 셀을 압축합니다. Overflow-x: auto를 사용하여 테이블을 div로 래핑하면 테이블이 자연스러운 너비로 유지되고 방문자가 페이지 레이아웃을 깨지 않고 옆으로 스크롤할 수 있습니다.

자신의 데이터와 일치하도록 열을 추가하거나 제거하고 셀을 클릭하여 편집한 다음 완성된 마크업을 복사합니다. 래퍼 div는 이 확인란이 켜져 있는 동안에만 추가되므로 래핑된 HTML과 래핑되지 않은 HTML을 나란히 비교할 수 있습니다.