版权声明：本文为博主原创文章,博主QQ:289102120,博主Mobile:15891712396 https://blog.csdn.net/vinglemar/article/details/88362350
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Table Demo</title>
<style type="text/css">
table {
width: 80%;
margin-right: auto;
margin-left: auto;
}
th {
background-color: #CCC;
}
td,th {
border-bottom-width: 1px;
border-bottom-style:dashed;
border-bottom-color: #666;
}
.row1 th {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666;
}
</style>
</head>
<body>
<table>
<tr class="row1">
<th>ID</th>
<th>Name</th>
<th>Sex</th>
<th>Age</th>
<th>Web</th>
</tr>
<tr>
<th>HT001</th>
<td>张三</td>
<td>F</td>
<td>21</td>
<td>89.45</td>
</tr>
<tr>
<th>HT002</th>
<td>李四</td>
<td>F</td>
<td>18</td>
<td>67.00</td>
</tr>
<tr>
<th>HT003</th>
<td>王五</td>
<td>M</td>
<td>16</td>
<td>44.90</td>
</tr>
<tr>
<th>HT004</th>
<td>王麻子</td>
<td>M</td>
<td>22</td>
<td>67.90</td>
</tr>
<tr>
<th>HT005</th>
<td>赵六</td>
<td>F</td>
<td>88</td>
<td>100.00</td>
</tr>
<tr>
<th>HT006</th>
<td>宋七</td>
<td>F</td>
<td>45</td>
<td>34.12</td>
</tr>
</table>
</body>
</html>
最终效果: 在浏览器中,表格居中,左右留有20%的空白。
上述CSS代码有些冗余，优化为:
<style type="text/css">
table {
width: 80%;
margin-right: auto;
margin-left: auto;
}
th{
background-color: #CCC;
}
th,td{
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #999;
}
.row1 th{
border-bottom-style: solid;
}
</style>