<table>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>1번</td>
<td>김철수</td>
<td>23살</td>
</tr>
<tr>
<td>2번</td>
<td>김백수</td>
<td>21살</td>
</tr>
<tr>
<td>3번</td>
<td>홍길동</td>
<td>25살</td>
</tr>
<tr>
<td>4번</td>
<td>아무개</td>
<td>20살</td>
</tr>
</tbody>
</table>
table {
border-collapse: collapse;
width: 500px;
margin: 1rem auto;
background-color: white;
}
thead{
box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
}
/* 테이블 행 */
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
text-align: center;
}
th {
padding: 8px;
text-align: left;
text-align: center;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
color: #000;
}
/* 테이블 올렸을 때 */
tbody tr:hover {
background-color: #d3d3d3;
opacity: 0.9;
cursor: pointer;
}
/* 테이블 비율 */
th:nth-child(1),
td:nth-child(1) {
width: 15%;
}
th:nth-child(2),
td:nth-child(2) {
width: 55%;
}
th:nth-child(3),
td:nth-child(3) {
width: 30%;
}
th, td {
border-left: none;
border-right: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.