반응형
CSS Responsive Table (적응형 테이블)
화면이 너무 작아서 전체 내용을 표시할 수 없는 경우 응답 테이블에 수평 스크롤 막대가 표시된다:
| <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) {background-color: #f2f2f2;} </style> </head> <body> <h2>적응형 테이블</h2> <p>화면이 너무 많은 경우 응답 테이블에 수평 스크롤 막대가 표시됩니다 전체 내용을 표시하기에는 작습니다. 브라우저 창의 크기를 조정하여 효과 확인:</p> <p>적응형 테이블을 만들려면 테이블 요소 주위에 <strong>overflow-x:auto</strong>이 있는 컨테이너 요소(예: div)를 추가합니다:</p> <div style="overflow-x: auto;"> <table> <tr> <th>이름</th> <th>성</th> <th>점수</th> <th>점수</th> <th>점수</th> <th>점수</th> <th>점수</th> <th>점수</th> <th>점수</th> <th>점수</th> <th>점수</th> <th>점수</th> <th>점수</th> <th>점수</th> <th>점수</th> <th>점수</th> <th>점수</th> <th>점수</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>철수</td> <td>최</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>영희</td> <td>양</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> </tr> </table> </div> </body> </html> |
<table> 요소 주위에 overflow-x:auto가 있는 컨테이너 요소(<div>와 같은)를 추가하여 응답하도록 한다:
CSS Table 속성
| 속성 | 설명 |
| border | 하나의 선언에 모든 테두리 속성을 설정합니다 |
| border-collapse | 테이블 테두리를 축소할지 여부를 지정 |
| border-spacing | 인접 셀 경계 사이의 거리를 지정합니다 |
| caption-side | 표 캡션의 위치를 지정합니다 |
| empty-cells | 테이블의 빈 셀에 테두리 및 배경을 표시할지 여부를 지정합니다 |
| table-layout | 테이블에 사용할 레이아웃 알고리즘을 설정합니다 |
지금까지 CSS에서 적응형 테이블 개념과 어떻게 설정하고 활용하는지에 대해서 살펴보았다.
반드시 손으로, 눈으로, 머리로 실습하고 익히기를 추천합니다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > CSS문법' 카테고리의 다른 글
| CSS display 속성 (0) | 2023.08.18 |
|---|---|
| CSS table style (0) | 2023.08.17 |
| CSS table alignment (0) | 2023.08.16 |
| CSS table size (0) | 2023.08.15 |
| CSS Table (0) | 2023.08.14 |
댓글