HTML 테이블에 가로 스크롤을 추가하는 방법은 무엇입니까?

가로 스크롤로 HTML 테이블 확장

광범위한 데이터 테이블을 처리할 때는 세로 및 스크롤링을 모두 제공하여 사용자 경험을 향상시키는 것이 필요합니다. 가로 스크롤 기능. 이 문서에서는 HTML 테이블에 가로 스크롤 막대를 추가하여 테이블의 콘텐츠 크기에 관계없이 원활한 탐색을 보장하는 방법을 설명합니다.

가로 스크롤 막대 추가

가로 스크롤을 구현하려면 , 다음 단계를 따르세요.

1. 테이블을 블록으로 표시: 설정 의 표시 속성입니다. 차단할 요소입니다. 이렇게 하면 테이블이 컨테이너의 전체 너비를 차지할 수 있습니다.
   가로 스크롤 활성화: Overflow-x 속성을 사용하고 자동으로 설정합니다. 이는 표 내용이 사용 가능한 너비를 초과할 때 수평 스크롤 막대를 표시하도록 브라우저에 지시합니다.

   table {
       display: block;
       overflow-x: auto;
       white-space: nowrap;
   }

   추가 고려 사항

   • 셀이 전체 테이블을 채우려면 다음 코드를 CSS:

   table tbody {
       display: table;
       width: 100%;
   }

   • 고급 스크롤 동작에 대해서는 다음 리소스를 참조하세요: [스크롤링 테이블 캡션](https://www.lizkeogh.com/html-table-caption- 부동 소수점 없는 스크롤/).

위 내용은 HTML 테이블에 가로 스크롤을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!