<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 테이블</title>
<style>
.container {width:400px; margin:100px auto;}
table.box {
width:100%;
border-top:3px solid #36F;
border-bottom:3px solid #36F;
border-collapse:collapse; /*테이블에 있는 기본 여백을 제거*/
}
/*개별 스타일 시트는 공통 스타일 시트 아래쪽에 작성*/
table.box th, table.box td {
padding:10px 15px;
border-bottom:1px dashed #09F;
}
table.box th {
background:skyblue;
border-bottom:3px solid #36F;
}
table.box td {text-align:center;}
</style>
</head>
<body>
<div class="container">
<table class="box">
<tr>
<th>지역</th>
<th>프로축구 팀</th>
<th>일정</th>
</tr>
<tr>
<td>울산</td>
<td>울산 vs 서울</td>
<td>2022.10.04</td>
</tr>
<tr>
<td>기흥</td>
<td>기흥 vs 울산</td>
<td>2022.10.05</td>
</tr>
<tr>
<td>서울</td>
<td>서울 vs 기흥</td>
<td>2022.10.06</td>
</tr>
</table>
</div><!-- end:container -->
</body>
</html>
결과
