<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS表格樣式-詳細使用</title>
<style type="text/css">
table{
width: 400px;
/*border: 1px solid #888888; 表格線條*/
border-collapse: collapse; /*決定表格之間的邊線是否兩條變為一條*/
}
td{
border-bottom: 1px solid #888888;
padding: 10px;
}
tr:nth-child(1){ /*表格中的第一對 tr*/
background-color: #7788aa;
color: #ffffff;
}
tr:nth-child(even){ /*表格中的第偶數對 tr*/
background-color: #e8e8e8;
}
</style>
</head>
<body>
<table>
<tr>
<td>球隊</td>
<td>勝</td>
<td>敗</td>
</tr>
<tr>
<td>紐約洋基隊</td>
<td>10</td>
<td>8</td>
</tr>
<tr>
<td>波士頓紅襪隊</td>
<td>9</td>
<td>9</td>
</tr>
<tr>
<td>多倫多藍鳥</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
參考影片: https://goo.gl/FM6eWT
留言列表
Impression (1)
