題目描述：請(qǐng)寫一個(gè)表格以及對(duì)應(yīng)的CSS隘弊，使表格奇數(shù)行為白色背景哈踱，偶數(shù)行為灰色背景，鼠標(biāo)移上去時(shí)為黃色背景梨熙。
刷題時(shí)看到這道嚣鄙，其實(shí)是想通過這道題來鞏固一下對(duì)表格樣式的控制。
對(duì)于如下一個(gè)表格
<table class="demo">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
不加樣式時(shí)這樣子的
- 樣式一：給 table 加 border
.demo {
border: 1px solid #333;
}
樣式一
- 樣式二：給 td 加 border
td {
border: 1px solid red;
}
樣式二
- 樣式三：同時(shí)給 table 和 td 加border
.demo {
border: 1px solid #333;
}
td {
border: 1px solid red;
}
樣式四
表格同時(shí)加了兩個(gè)邊框串结，誒哑子，為什么table的border和td的border中間會(huì)有間隔？于是引出了cellspacing這個(gè)屬性肌割。
- 樣式四：cellspacing屬性
cellspacing 屬性規(guī)定單元格之間的空間卧蜓。與之類似的還有cellpadding屬性，但是cellpadding規(guī)定單元邊沿與其內(nèi)容之間的空白把敞。
也就是說弥奸，cellspacing類似于margin，而cellpadding類似于padding奋早。
如果我們加了這么一行
<table class="demo" cellspacing="0" cellpadding="10">
樣式四
可以看出盛霎，表格各單元格邊距和內(nèi)容之間都有了一個(gè)10px的padding，但是還發(fā)現(xiàn)了另一個(gè)問題耽装，table的border是雙重的愤炸，也就是，table的border和td的border都起了作用掉奄，疊加了规个。
那么，我們?cè)撛趺从淇斓慕o一個(gè)表格設(shè)置邊框么姓建？
- 樣式五：左上border利用td標(biāo)簽設(shè)置诞仓，右下border利用table標(biāo)簽設(shè)置。
td {
border-top: 1px solid #333;
border-left: 1px solid #333;
}
.demo {
border-right: 1px solid red;
border-bottom: 1px solid red;
}
樣式五
哦也~搞定速兔。
然后這道題自己貼的代碼如下~
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
td {
border-top: 1px solid #333;
border-left: 1px solid #333;
}
table {
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
tr:nth-child(odd) {
background: #fff;
}
tr:nth-child(even) {
background: gray;
}
tr:hover {
background: yellow;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>
