2018-09-03用CSS实现表格样式
2018-09-03 本文已影响37人
菩灵
用CSS实现的表格样式：
代码奉上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格样式</title>
<style type="text/css">
.goods_list{
width: 600px;
height: 200px;
border: 1px solid #333;
border-collapse: collapse;
font-family: "Microsoft Yahei"
}
.goods_list th,.goods_list td{
border: 1px solid #333;
text-align: center;
}
.goods_list th{
background-color: #3366cc;
color: #fff;
}
</style>
</head>
<body>
<table class="goods_list">
<tr>
<th>序号</th>
<th>名称</th>
<th>数量</th>
<th>价格</th>
<th>备注</th>
</tr>
<tr>
<td>1</td>
<td>苹果</td>
<td>1000</td>
<td>￥5.00</td>
<td>销售中</td>
</tr>
<tr>
<td>2</td>
<td>苹果</td>
<td>1000</td>
<td>￥5.00</td>
<td>销售中</td>
</tr>
<tr>
<td>3</td>
<td>苹果</td>
<td>1000</td>
<td>￥5.00</td>
<td>销售中</td>
</tr>
<tr>
<td>4</td>
<td>苹果</td>
<td>1000</td>
<td>￥5.00</td>
<td>销售中</td>
</tr>
</table>
</body>
</html>
效果：
CSS实现表格样式
