방법 - 반응형 테이블
반응형 테이블을 만드는 방법을 알아보세요.
반응형 테이블
화면이 너무 작아 전체 콘텐츠를 표시할 수 없는 경우 반응형 테이블에 가로 스크롤 막대가 표시됩니다. 효과를 보려면 브라우저 창의 크기를 조정합니다.
이름 | 성 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
처녀 | 스미스 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
이브 | 잭슨 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
아담 | 존슨 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
overflow-x:auto
반응형 테이블을 생성하려면 <table> 주위에 컨테이너 요소를 추가하세요 .
예시
<div style="overflow-x:auto;">
<table>
...
</table>
</div>
참고: OS X Lion(Mac)에서 스크롤 막대는 기본적으로 숨겨져 있고 사용할 때만 표시됩니다("overflow:scroll" 또는 auto가 설정되어 있어도).
팁: 표의 스타일을 지정하는 방법에 대해 자세히 알아보려면 CSS 표 자습서 로 이동하십시오 .