고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
css를 이용해서 테이블을 꾸밀때, PC, 모바일, 테블릿 상관없이 폭이 조정되고, 홀수 라인과 짝수 라인을 구별하도록 배경색을 설정하고, 마우스 오버시에 해당 라인을 특정시켜주는 기본코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #e9e9e9;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>제목 1</th>
<th>제목 2</th>
<th>제목 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>데이터 1</td>
<td>데이터 2</td>
<td>데이터 3</td>
</tr>
<tr>
<td>데이터 4</td>
<td>데이터 5</td>
<td>데이터 6</td>
</tr>
<tr>
<td>데이터 7</td>
<td>데이터 8</td>
<td>데이터 9</td>
</tr>
</tbody>
</table>
</body>
</html>
|
cs |
참고로 저 동해둘리가 직접 운영하는 '성공하는 중이다' 카페를 소개드립니다.
각자의 분야에서 성공을 향해 가는 과정에서 힘이되는 이야기, 힘이되는 사진, 성공스토리, 실패스토리 등을 나누고자 합니다. 많은 참여 부탁드려요
https://cafe.naver.com/ingsuccess
성공하는 중이다 : 네이버 카페
성공을 위해 실패를 두려워하지 않는 분들의 이야기를 나누고 싶습니다. 우리는 성공하는 중이니까요!
cafe.naver.com
반응형
'IT공부방 > HTML5, CSS' 카테고리의 다른 글
| CSS 텍스트 형광펜 효과주기/ 전체 형광/ 절반만 형광 (0) | 2023.06.16 |
|---|---|
| CSS 로 배경색상을 변경하는 애니메이션 코드... 10초간격 반복변경 (0) | 2023.06.15 |
| css버튼 이쁘게 꾸미기, 애니메이션 효과주기 (0) | 2022.08.05 |
| CSS 그라데이션 적용하기 ... linear-gradient (0) | 2020.12.02 |
| CSS 곡선 애니메이션, 패스애니메이션 따라하기 (2) | 2020.02.22 |
댓글 영역