5. 반응형 테이블
페이지 정보
작성자 관리자 댓글 0건 조회 1,203회 작성일 22-01-13 16:02본문
실습 : responseTable.html
<!DOCTYPE html>
<html>
<head>
<title>반응형 웹</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#memTable {
border:1px solid #000;
border-collapse:collapse;
}
th{
border:1px solid #333;
padding:3px 6px;
}
td{
border: 1px solid #999;
padding:3px 6px;
}
@media only screen and (min-width:768px){
.email, .emailData {display:none; visiblity:hidden;}
}
@media only screen and (min-width:1024px){
.email, .emailData {display:block}
}
@media only screen and (max-width:414px){
.address, .addData {display:none; visibility:hidden;}
}
</style>
</head>
<body>
<h3>반응형 테이블</h3>
<table id="memTable">
<thead>
<tr>
<th class="number">학번</th>
<th class="name">이름</th>
<th class="address">주소</th>
<th class="email">이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td class="numData">201411</td>
<td class="nameData">홍길동</td>
<td class="addData">서울시 강남구 역삼동 삼정빌딩 111-241</td>
<td class="emailData">test@test.com</td>
</tr>
<tr>
<td class="numData">201414</td>
<td class="nameData">홍길서</td>
<td class="addData">서울시 용산구 청파동 현대 아파트 201-454</td>
<td class="emailData">test@test.com</td>
</tr>
<tr>
<td class="numData">201421</td>
<td class="nameData">유재석</td>
<td class="addData">서울시 은평구 녹번동 삼성 아파트 101-474</td>
<td class="emailData">test@test.com</td>
</tr>
<tr>
<td class="numData">201430</td>
<td class="nameData">김말똥</td>
<td class="addData">서울시 강서구 등촌동 한양아파트 102동1101호</td>
<td class="emailData">test@test.com</td>
</tr>
</tbody>
</table>
</body>
</html>
실습 : responseTable2.html
<!DOCTYPE html>
<html>
<head>
<title>반응형 웹</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrap{
margin: 0 auto; /*가운데정렬*/
}
.responseTable{
width:100%;
border:none;
border-collapse:collapse;
}
th, td{
border-collapse: collapse;
border: 1px solid #5e5e5e;
}
th, td {
padding:0.5em 1em;
}
th {
background: #d9d9d9;
}
@media screen and (max-width:414px){
thead {display: none;}
.responseTable tr, td{display: block;}
.responseTable td:nth-child(1):before{ content: "번호"}
.responseTable td:nth-child(2):before{ content: "제목"}
/* after 뒤에 , before 앞에 문자열을 붙여 쓴다.*/
.responseTable td:nth-child(1):before, td:nth-child(2):before{
font-weight: bold;
position:absolute;
left:1em;
}
tr {
position:relative;
margin-bottom: 1em;
}
td:nth-child(1), td:nth-child(2) {
padding-left:25%;
}
.ud{
border:none;
position:absolute;
right:0;
top:0;
}
.number{
background:#8bc9e3;
}
}
</style>
</head>
<body>
<div class="wrap">
<h3>반응형 테이블</h3>
<table class="responseTable">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>수정/삭제</th>
</tr>
</thead>
<tbody>
<tr>
<td class="number">
100111
</td>
<td class="subject">
게시글의 제목입니다.----------------------------------------------------
</td>
<td class="ud">
<a href="#" class="update">수정</a>
<a href="#" class="delete">삭제</a>
</td>
</tr>
<tr>
<td class="number">
120121
</td>
<td class="subject">
게시글의 제목입니다.2----------------------------------------------------
</td>
<td class="ud">
<a href="#" class="update">수정</a>
<a href="#" class="delete">삭제</a>
</td>
</tr>
<tr>
<td class="number">
200121
</td>
<td class="subject">
게시글의 제목입니다.3----------------------------------------------------
</td>
<td class="ud">
<a href="#" class="update">수정</a>
<a href="#" class="delete">삭제</a>
</td>
</tr>
<tr>
<td class="number">
300134
</td>
<td class="subject">
게시글의 제목입니다.4----------------------------------------------------
</td>
<td class="ud">
<a href="#" class="update">수정</a>
<a href="#" class="delete">삭제</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.