重溫和記錄下表格的制作流程。主要利用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是指每個父元素下的第一個匹配元素。