重温和记录下表格的制作流程。主要利用css3中的border-radius属性设置圆角。还有制作表格的一些顺序和注意的地方，逐渐总结。
完成后的表格如下：
先写html表格代码
分析表格的数据，可以先在纸上画下大概布局。因为合并的单元格要用colspan和rowspan进行设置。htm代码如下：
<body> <table class="custom_tb"> <thead> <tr> <th>#</th> <th>Hostname</th> <th>Uid</th> <th>status</th> </tr> </thead> <tr> <td>1</td> <td>server1</td> <td>12323342</td> <td>connect</td> </tr> <tr> <td>2</td> <td>server2</td> <td>63382913</td> <td>disconnect</td> </tr> </table> </body>
定义表格样式
写表格样式的顺序可以如下(当然自己习惯最重要):
(1)设置table的属性，比如字体的大小和风格，如下：
table{
/*border-collapse: collapse;*/
border-spacing:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #444;
}
(2)设置的单元格的属性，包括边框，padding，背景颜色等。最后去掉和table边框重叠的border。
.custom_tb tr:hover{
background-color: #fbf8e9;
transition: all 0.1s ease-in-out;
}
.custom_tb th,.custom_tb td{
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.custom_tb th{
background-color: #dce9f9;
border-top:none;
}
.custom_tb td:first-child,.custom_tb th:first-child{
border-left: none;
}
.custom_tb th:first-child{
border-radius: 6px 0 0 0;
}
.custom_tb th:last-child{
border-radius: 0 6px 0 0;
}
.custom_tb tr:last-child td:first-child{
border-radius: 0 0 0 6px;
}
.custom_tb tr:last-child td:last-child{
border-radius: 0 0 6px 0;
}
完成后的效果如下：
(3)设置table的border属性，包裹整个表格。
.custom_tb{
width: 80%;
margin: 50px auto;
border:1px solid #ccc;
border-radius: 6px;
box-shadow: 0 1px 1px #ccc;
}
注意：在上面的代码理解过程中有几个需要注意的地方。border-collapse不能和border-radius一起用，不然后者会失效。还有伪类:first-child是指每个父元素下的第一个匹配元素。