实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的应用</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color:#E9EAED;
}
.box{
width:650px;
height:320px;
margin: 80px auto;
padding: 15px;
border-radius: 5px;
background-color: #FFFFFF;
}
.title{
color:#ff531a;
margin: 0 auto;
text-align: center;
}
.title p{
float:right;
margin-right: 25px;
}
.userInfo{
clear: both;
}
.userInfo span{
display:inline-block;
border-bottom: 1px solid #ff531a;
color: #000000;
font-weight: normal;
letter-spacing: 1px;
/*text-decoration: underline;*/
}
.userInfo .p_left{
color: #ff531a;
font-weight: bold;
float: left;
margin:0 25px 5px 25px;
}
.userInfo .p_right{
color: #ff531a;
font-weight: bold;
float: right;
margin:0 25px 5px 25px;
}
table{
width:600px;
margin: auto;
text-align: center;
border-collapse: collapse; /*合并单元格边框*/
}
thead tr th:nth-child(1){
width: 70px;
}
thead tr th:nth-child(2){
width: 70px;
}
thead tr th:nth-child(3){
width: 50px;
}
thead tr th:nth-child(4){
width: 70px;
}
thead tr th:nth-child(5){
width: 168px;
}
thead tr th:nth-child(6){
width: 170px;
}
tbody tr td:nth-child(5){
text-align: right;
padding-right: 25px;
}
tbody tr td:nth-child(6){
text-align: right;
padding-right: 25px;
}
tbody tr:hover{
background-color: #e5ffe5;
}
thead th{
border:1px solid #ff531a;
}
tbody td{
border:1px solid #ff531a;
}
tbody tr .sum{
text-align: left;
padding-right: 25px;
}
tbody tr ul{
list-style-type: none;
float: left;
margin:0 1px;
padding-left: 15px;
}
tbody tr ul li{
float: left;
margin:0 1px;
color: #ff531a;
font-weight: bold;
}
tbody tr ul li span{
color: #000000;
font-weight: normal;
}
tbody tr td .right{
float: right;
display: inline;
}
tfoot td{
text-align: left;
color:#ff531a;
font-weight: bold;
padding-top: 5px;
}
</style>
</head>
<body>
<div class="box">
<div class="title">
<h2>收 款 收 据</h2>
<p>No. 9026360</p>
</div>
<div class="userInfo">
<p class="p_left">客户 : <span> 深圳市子傅商业咨询*** </span></p>
<p class="p_right"> <span> 2019 </span> 年<span> 07 </span>月<span> 02 </span>日</p>
<br>
<p class="p_left">名称 : <span> 风清扬 </span></p>
<p class="p_right">电话 : <span> 13845679988 </span></p>
</div>
<table>
<!--表格头内容-->
<thead>
<tr>
<th>货号</th>
<th>名称</th>
<th>单位</th>
<th>数量</th>
<th>单价</th>
<th>金额</th>
</tr>
</thead>
<!--表格主体内容-->
<tbody>
<tr>
<td>X00S1</td>
<td>大米</td>
<td>KG</td>
<td>1000</td>
<td>￥9.00</td>
<td>￥9,000.00</td>
</tr>
<tr>
<td>D00S2</td>
<td>轿车</td>
<td>辆</td>
<td>2</td>
<td>￥420,000.00</td>
<td>￥840,000.00</td>
</tr>
<tr>
<td>Q0092</td>
<td>汽油</td>
<td>升</td>
<td>10000</td>
<td>￥7.60</td>
<td>￥76,000.00</td>
</tr>
<tr>
<td>Y00F7</td>
<td>劳务费</td>
<td>次</td>
<td>2</td>
<td>￥20,000.00</td>
<td>￥40,000.00</td>
</tr>
<tr>
<td>LQ0F4</td>
<td>路桥费</td>
<td>公里</td>
<td>4500</td>
<td>￥2.50</td>
<td>￥11,250.00</td>
</tr>
<tr>
<td>C00A1</td>
<td>食宿费</td>
<td>日</td>
<td>11</td>
<td>￥500.00</td>
<td>￥5,500.00</td>
</tr>
<tr>
<td colspan="2">合计金额</td>
<td colspan="4" class="sum">
<ul>
<li><span>无</span>佰</li>
<li><span>玖</span>拾</li>
<li><span>捌</span>万</li>
<li><span>壹</span>仟</li>
<li><span>柒</span>佰</li>
<li><span>伍</span>拾</li>
<li><span>零</span>元</li>
<li><span>零</span>角</li>
<li><span>零</span>分</li>
</ul>
<p class="right">￥981,750.00</p>
</td>
</tr>
</tbody>
<!--表格尾内容-->
<tfoot>
<tr>
<td colspan="2">填票:</td>
<td colspan="2">收款人:</td>
<td>会计:</td>
<td>收款单位:</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
