반응형 홈페이지 테이블 만들기 입니다
컬럼이 많은 테이블을 표현할땐 특히 가로가 길어지면 세팅하는게 어렵습니다.
그럴땐 아래처럼 해보세요.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<h2>Responsive Table</h2>
<p>If you have a table that is too wide, you can add a container element with overflow-x:auto around the table, and it will display a horizontal scroll bar when needed.</p>
<p>Resize the browser window to see the effect. Try to remove the div element and see what happens to the table.</p>
<div style="overflow-x:auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</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>Eve</td>
<td>Jackson</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>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</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>
</tr>
</table>
</div>
</body>
</html>
이렇게 소스를 넣고 돌리면
화면이 클때는 위쪽 사진처럼 일반적으로 보입니다.
화면이 작을때는 위쪽 사진처럼 하단에 스크롤이 나오게 되어 손이나 마우스로 조정을해서 볼수 있습니다.
'프로그래밍 > HTML, CSS' 카테고리의 다른 글
| HTML - <font>, <p> , <div>, <a> (0) | 2020.06.04 |
|---|---|
| 자바스크립트 웹페이지 팝업 띄우기 (0) | 2020.05.12 |
| 자바스크립트 날짜 시간 input 박스에 넣기 (0) | 2020.05.04 |
| html th td 줄바꿈 제어하기 nowrap (0) | 2020.04.15 |
| 크롬에서 css 적용안될 때 이용법 (0) | 2020.04.15 |
댓글