<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>车辆查定报告单</title>
<link href="<c:url value=\'/css/bgd.css\'/>" rel="stylesheet" type="text/css" media="print" />
<script type="text/javascript" src="<c:url value=\'/js/jquery-1.9.1.min.js\'/>"></script>
<script type="text/javascript" src="<c:url value=\'/js/jquery.PrintArea.js\'/>"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#print_btn").click(function(){
setTimeout(beforePrint,1500);//左右对齐函数执行时间延迟1.5秒，等待数据从后端获取
setTimeout(function(){//打印延迟2秒
$("#my_area").printArea({
mode:"popup",
popTitle:"打印测试页"
});
},2000);
});
var height_left = $(".w-desc1").height(); //本页面html结构是一个大table里包含着左右2个小table,此js代码为控制左右两个小table的高度在后台加数据时，table的高度还能保持等高
var height_right = $(".w-desc2").height();
if(height_left >= height_right){
$(".w-desc2").height(height_left);
}else if(height_left < height_right){
$(".w-desc1").height(height_right);
}
});
</script>
<!-- css -->
<style type="text/css">
body{margin:0;padding:0;font-size:12px;font-family:"宋体";}
img{border:0;}
.dialog{position:relative;width:1100px;margin:0 auto;margin-top:10px;}/*border:8px solid #9197a6;*/
.dialog .close{width:20px;height:20px;position:absolute;top:-14px;right:-14px;cursor:pointer;}
.dialog .content{width:100%;}
.dialog .bd{overflow:hidden;position:relative;width:100%;}
.dialog .bd h1{text-align:center;height:30px;margin:20px 0;font-size:30px;letter-spacing:6px;font-weight:700;font-famliy:"微软雅黑";}
.dialog .bd-l{width:100%;}/*972-2-2-28=940*/
.dialog .bd-r{position:absolute;top:70px;right:26px;width:254px;}
/*table公共*/
.dialog .table{margin-top:30px;margin-bottom:30px;border-collapse:collapse;border:0;}
.dialog .table td, .dialog .table th{border:1px solid #9197a6;padding:4px 1px;}
.dialog .table .title{text-align:left;background:#6e7996;color:#fff;padding-left:20px;}
.dialog .table .subtitle{text-align:left;background:#c0c8cd;}
.dialog .table th{background:#eaeaea;text-align:right;}
.dialog p{margin:11px 0;}
.dialog .large{margin-left:2px;font-size:18px;color:red;font-weight:bold;}
.dialog .small{margin-left:12px;font-size:14px;color:red;}
/*table定制*/
.dialog .w914,.dialog .w914-desc,.dialog .w914-nowrap,.dialog .w914-sign,.w914-attach{width:96%;margin:0 auto;}
.dialog .w914 td{border:0;border-bottom:1px solid #9197a6;padding:3px 4px;}
.dialog .w914 th{background:none;color:#253c76;border:0;border-bottom:1px solid #9197a6;}
.dialog .w914 img{padding:33px 0;width:95%;}
.dialog .w914-desc td{border:0;padding:0;}
.dialog .w914-desc thead th.title{text-align:center;}
.dialog .w914-desc td > table{padding:0;margin:0;}
.dialog .w-desc1,.dialog .w-desc2{width:100%;}
.dialog .w-desc1 td,.dialog .w-desc2 td{border:1px solid #9197a6;padding:9px 0 9px 20px;}
.dialog .w-desc1 th,.dialog .w-desc2 th{text-align:center;background:#cdcfd3;}
.dialog .w914-desc td > table.w-desc2{margin-left:-1px;}
.dialog .w914-nowrap div{display:inline;float:right;padding-right:10px;}
.w914-attach td{vertical-align:middle;}
.w914-attach label.selected{vertical-align:middle;display:inline-block;*display:inline;width:8px;height:8px;background:#9197a6;border-radius:5px;}
.w914-attach label{margin-left:3px;vertical-align:middle;display:inline-block;*display:inline;width:8px;height:8px;background:#fff;border-radius:5px;border:1px solid #9197a6;}
.dialog .w914-sign td{border:0;width:25%;font-size:14px;line-height:20px;}
p{width:1056px;margin:20px auto;font-size:14px;}
</style>
</head>
<body >
<div id="my_area" >
<div class="dialog">
<!--<img class="close" src="images/close.jpg" />-->
<div class="content">
<div class="hd"></div>
<div class="bd">
<div class="bd-l">
<h1>车辆查定报告单</h1>
<table class="table w914">
<tr><th class="title" colspan="10"></th></tr>
<tr>
<th>4S店：</th><td>惠通保利星辉奔驰</td>
<th>联系方式：</th><td>010-8739 1111</td>
<th>联系地址：</th><td>北京市朝阳区王四营乡马房寺路</td>
<th>车辆号牌：</th><td>京P-B5800</td>
<th>车身颜色：</th><td>黑色</td>
</tr>
<tr>
<th>车型车款：</th><td colspan="3">2009款大众/迈腾/1.4T-DSG-A/MT精英版</td>
<th>VIN码：</th><td>HBUN5878901234567</td>
<th>变速箱：</th><td>手动</td>
<th>行驶里程：</th><td>58000公里</td>
</tr>
<tr>
<th>上牌地点：</th><td>北京</td>
<th>登记日期：</th><td>2009-10-24</td>
<th>年检到期：</th><td>2014-5-18</td>
<th>交强险到期：</th><td>2014-5-21</td>
<th>商业险到期：</th><td>2014-5-21</td>
</tr>
<tr>
<th>车身级别：</th><td>轿车</td>
<th>事故次数：</th><td>无</td>
<th>发动机：</th><td>汽油</td>
<th>以前所用费用：</th><td>非营运</td>
<th>以前用途：</th><td>私车</td>
</tr>
</table>
<table class="table w914">
<tr>
<!-- left -->
<td style="vertical-align:middle;border:0;" width="50%">
<img src="../../images/082.jpg" />
</td>
<!-- right -->
<td width="50%" style="border:0;">
<img src="../../images/081.jpg" />
</td>
</tr>
</table>
<table class="table w914-desc">
<td width="50%" height="100%">
<table class="table w-desc1">
<thead>
<tr>
<th class="title" width="6px"></th>
<th class="title" width="33%">检测项目</th>
<th class="title" width="23%">损伤</th>
<th class="title" width="43%">描述</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="13" width="6px">主体框架</th>
<td>车体左右对称性</td>
<td>正常</td>
<td></td>
</tr>
<tr>
<td>左A柱</td>
<td>变形</td>
<td>于2013年损伤，不影响使用</td>
</tr>
<tr>
<td>左B柱</td>
<td>正常</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>正常</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>正常</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>正常</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>左C柱</td>
<td>扭曲</td>
<td>2013年已修复</td>
</tr>
<tr>
<td width="110px">车体左右对称对称对</td>
<td>正常，正常，正常，正常，正常，正常，正常，正常，正常，正常，正常，正常，正常，</td>
<td>正常正常，正常，正常，正常，正常，正常，正正常，正常，正常，正常，正常正常，，</td>
</tr>
<tr>
<td>车体左右对称</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>车体左右对称</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>车体左右对称</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>车体左右对称</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<th rowspan="8" width="6px">右侧</th>
<td>车体左右对称</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>车体左右对称</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>车体左右对称</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>车体左右对称</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>车体左右对称</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>车体左右对称</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>车体左右对称</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>车体左右对称</td>
<td>正常</td>
<td>正常</td>
</tr>
</tbody>
</table>
</td>
<td width="50%" height="100%">
<table class="table w-desc2">
<thead>
<tr>
<th class="title" width="6px"></th>
<th class="title" width="33%">检测项目</th>
<th class="title" width="23%">损伤</th>
<th class="title" width="43%">描述</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="7" width="6px">车头</th>
<td>前保险杠</td>
<td>正常前保</td>
<td>前保险杠</td>
</tr>
<tr>
<td>左前大灯</td>
<td>正常</td>
<td></td>
</tr>
<tr>
<td>右前大灯</td>
<td>正常</td>
<td></td>
</tr>
<tr>
<td>右前大灯</td>
<td>正常</td>
<td></td>
</tr>
<tr>
<td>右前大灯</td>
<td>正常</td>
<td></td>
</tr>
<tr>
<td>右前大灯</td>
<td>正常</td>
<td></td>
</tr>
<tr>
<td>右前大灯</td>
<td>正常</td>
<td></td>
</tr>
<tr>
<th rowspan="4" width="6px">顶部</th>
<td>左转向灯</td>
<td>正常</td>
<td></td>
</tr>
<tr>
<td>前保险杠</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>前保险杠</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>前保险杠</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<th rowspan="3" width="6px">车尾</th>
<td>前保险杠</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>前保险杠</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>前保险杠</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<th rowspan="7" width="6px">左侧</th>
<td>前保险杠</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>前保险杠</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>前保险杠</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>前保险杠</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>前保险杠</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>前保险杠</td>
<td>正常</td>
<td>正常</td>
</tr>
<tr>
<td>前保险杠</td>
<td>正常</td>
<td>正常</td>
</tr>
</tbody>
</table>
</td>
</table>
<table class="table w914-attach">
<tr><th class="title" colspan="12">随车附件</th></tr>
<tr>
<th>备胎：</th><td><label class="selected" for=""></label>有<label for=""></label>无</td>
<th>轮胎扳手及随车工具：</th><td><label class="selected" for=""></label>有<label for=""></label>无</td>
<th>千斤顶：</th><td><label class="selected" for=""></label>有<label for=""></label>无</td>
<th>三角警示牌：</th><td><label class="selected" for=""></label>有<label for=""></label>无</td>
<th>灭火器：</th><td><label class="selected" for=""></label>有<label for=""></label>无</td>
<th>玻璃加热功能：</th><td><label class="selected" for=""></label>有<label for=""></label>无</td>
</tr>
<tr>
<th>全套钥匙：</th><td><label class="selected" for=""></label>有<label for=""></label>无</td>
<th>遥控器及功能：</th><td><label class="selected" for=""></label>有<label for=""></label>无</td>
<th>喇叭高低音色：</th><td><label class="selected" for=""></label>有<label for=""></label>无</td>
<th>车内后视镜：</th><td><label class="selected" for=""></label>有<label for=""></label>无</td>
<th>座椅调节与加热：</th><td><label class="selected" for=""></label>有<label for=""></label>无</td>
<th>仪表板出风管道：</th><td><label class="selected" for=""></label>有<label for=""></label>无</td>
</tr>
</table>
<table class="table w914-nowrap">
<tr><th class="title">评估说明</th></tr>
<tr>
<td>本车09年购入，有5处车体损伤，4处内饰损伤，均已修复，不影响正常使用。<br/><br/><br/><br/><br/></td>
</tr>
<tr>
<td>评估价格：<span class="small">200000元</span><div>评估人：王勇 评估时间：2014-4-18</div></td>
</tr>
</table>
<table class="table w914-sign">
<tr>
<td>销售顾问签字：陈涛 日期：2014-04-30
客户签字：李云 日期：2014-04-30
</td>
<!--<td><br/>销售顾问签字：陈涛 日期：2014-04-12<br/><br/></td>
<td></td>
<td></td>
<td><br/><br/>客户签字：李云<br/><br/> 时间：2014-04-30<br/><br/></td>-->
</tr>
</table>
</div>
</div><!--bd-->
<div class="ft"></div>
</div><!--content-->
</div>
</div>
<p><a href="#" id="print_btn">点击这里打印</a></p>
</body>
</html>
以上页面为在同一页的jsp文件，还要单独外链一个bgd.css文件，作为单为打印样式设置的css样式：该样式就是网页样式，再根据实际调整