CSS 반응형 테이블
반응형 테이블
화면이 너무 작아 전체 콘텐츠를 표시할 수 없는 경우 반응형 테이블에 가로 스크롤 막대가 표시됩니다.
이름 | 성 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 | 포인트들 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
처녀 | 스미스 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
이브 | 잭슨 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
아담 | 존슨 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
overflow-x:auto
<table> 요소 주위에 컨테이너 요소(예: <div>)를 추가하여 반응형으로 만듭니다.
예시
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
참고: OS X Lion(Mac)에서 스크롤 막대는 기본적으로 숨겨져 있고 사용할 때만 표시됩니다("overflow:scroll"이 설정되어 있어도).
더 많은 예
이 예에서는 멋진 테이블을 만드는 방법을 보여줍니다.
이 예에서는 테이블 캡션의 위치를 지정하는 방법을 보여줍니다.
CSS 테이블 속성
Property | Description |
---|---|
border | Sets all the border properties in one declaration |
border-collapse | Specifies whether or not table borders should be collapsed |
border-spacing | Specifies the distance between the borders of adjacent cells |
caption-side | Specifies the placement of a table caption |
empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
table-layout | Sets the layout algorithm to be used for a table |