더보기
border-collapse: collapse; 는 표자체에 속성을 넣어주기(th, td에 넣으면 안먹힘)
td태그안에 a태그 넣어서 href 링크달아주기
border-width를 1px 0;으로 설정
<!DOCTYPE html>
<html lang="en">
<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>list관련속성2</title>
<style>
.table{border-collapse: collapse; width: 100%; text-align: center;}
.table thead th{border: 1px solid blueviolet; border-width: 1px 0;}
.table tbody td:nth-child(2){text-align: left;}
.table td:first-child, .table th:first-child{width: 10%;}
.table td:nth-child(3), .table th:nth-child(3){width: 30%;}
.table td:nth-child(5), .table th:nth-child(4){width: 15%;}
.table tbody tr:hover{background-color:lightcyan;}
.table tbody td a{text-decoration: none; color: black;}
.table tbody td a:hover{text-decoration: underline;}
</style>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td><a href="#">몬스터주식회사</a></td>
<td>디즈니</td>
<td>321</td>
</tr>
<tr>
<td>2</td>
<td><a href="#">몬스터대학교</a></td>
<td>픽사</td>
<td>202</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">토이스토리</a></td>
<td>버즈</td>
<td>111</td>
</tr>
</tbody>
</table>
</body>
</html>'괴발개발 > Html+CSS' 카테고리의 다른 글
| CSS_화면기준 단위 vw, vh (0) | 2021.06.13 |
|---|---|
| CSS_input태그 꾸미기 (0) | 2021.06.13 |
| CSS_table셀합치기(colspan, rowspan) (0) | 2021.06.13 |
| CSS_list-style 관련속성 (0) | 2021.06.13 |
| CSS_overflow, text-overflow(말줄임 표시) (0) | 2021.06.13 |