题目描述：请写一个表格以及对应的CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。
刷题时看到这道，其实是想通过这道题来巩固一下对表格样式的控制。
对于如下一个表格
<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>
不加样式时这样子的
- 样式一：给 table 加 border
.demo {
border: 1px solid #333;
}
样式一
- 样式二：给 td 加 border
td {
border: 1px solid red;
}
样式二
- 样式三：同时给 table 和 td 加border
.demo {
border: 1px solid #333;
}
td {
border: 1px solid red;
}
样式四
表格同时加了两个边框，诶，为什么table的border和td的border中间会有间隔？于是引出了cellspacing这个属性。
- 样式四：cellspacing属性
cellspacing 属性规定单元格之间的空间。与之类似的还有cellpadding属性，但是cellpadding规定单元边沿与其内容之间的空白。
也就是说，cellspacing类似于margin，而cellpadding类似于padding。
如果我们加了这么一行
<table class="demo" cellspacing="0" cellpadding="10">
样式四
可以看出，表格各单元格边距和内容之间都有了一个10px的padding，但是还发现了另一个问题，table的border是双重的，也就是，table的border和td的border都起了作用，叠加了。
那么，我们该怎么愉快的给一个表格设置边框么？
- 样式五：左上border利用td标签设置，右下border利用table标签设置。
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>
