테이블 Hoverable Table
테이블 Hoverable Table
:hover<tr> 의 선택기를 사용하여 마우스를 올려 놓은 상태에서 테이블 행을 강조 표시하십시오.
이름 성 저금
베드로 그리핀 $ 100
로이스 그리핀 $ 150
조 스완 손 300 달러
예
tr:hover {background-color: #f5f5f5}
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover{background-color:#f5f5f5}
</style>
</head>
<body>
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>

게시판 목록
퍼블리셔팁
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 47 | HTML |
|
19년 전 | 4543 | |
| 46 | HTML |
|
19년 전 | 5406 | |
| 45 | HTML | 19년 전 | 3295 | ||
| 44 | HTML |
|
19년 전 | 4378 | |
| 43 | HTML | 19년 전 | 3792 | ||
| 42 | HTML |
|
19년 전 | 3769 | |
| 41 | HTML |
|
19년 전 | 4268 | |
| 40 | HTML |
세은아빠2
|
19년 전 | 3932 | |
| 39 | HTML | 19년 전 | 4283 | ||
| 38 | HTML |
|
20년 전 | 6041 | |
| 37 | HTML |
yesmoa
|
20년 전 | 6719 | |
| 36 | HTML | 20년 전 | 3828 | ||
| 35 | HTML | 20년 전 | 5032 | ||
| 34 | HTML | 20년 전 | 4506 | ||
| 33 | HTML | 20년 전 | 3737 | ||
| 32 | HTML | 20년 전 | 3827 | ||
| 31 | HTML | 20년 전 | 4582 | ||
| 30 | HTML |
|
20년 전 | 6663 | |
| 29 | HTML |
|
20년 전 | 8600 | |
| 28 | HTML | 20년 전 | 7230 | ||
| 27 | HTML | 20년 전 | 4087 | ||
| 26 | HTML | 20년 전 | 2568 | ||
| 25 | HTML | 20년 전 | 3075 | ||
| 24 | HTML | 20년 전 | 6833 | ||
| 23 | HTML | 21년 전 | 4902 | ||
| 22 | HTML | 21년 전 | 4840 | ||
| 21 | HTML | 21년 전 | 3694 | ||
| 20 | HTML | 21년 전 | 4830 | ||
| 19 | HTML | 21년 전 | 4721 | ||
| 18 | HTML |
prosper
|
21년 전 | 3560 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기