快速创建一个表格样式

1.html文件

<div id="detail"></div>

 

2.JS文件

var detail='<table class="formTable"  border="0" cellspacing="0" cellpadding="0" style="padding:0px;width: 808px; margin-top:20px; border-bottom:1px solid #dddddd;">';
     detail+="<tr style='display:block; margin-bottom:-20px;'><td style='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;客户名称:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+name+"</td></tr>";
     detail+="<tr style='display:block; margin-bottom:-20px;'><td style='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;手机号:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+mobile+"</td></tr>";
     detail+="<tr style='display:block; margin-bottom:-20px;'><td style='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;证件号:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+certNo+"</td></tr>";

     detail+="<tr style='display:block; margin-bottom:-20px;'><td style='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;标的名称:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+goodName+"</td></tr>";
     detail+="<tr style='display:block; margin-bottom:-20px;'><td style='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;车牌号码:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+plateNum+"</td></tr>";
    
     detail+="<tr style='display:block; margin-bottom:-20px;'><td style='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;保证金:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+bailPrice+"</td></tr>";
     detail+="<tr style='display:block; margin-bottom:-20px;'><td style='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;成交金额:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+price+"</td></tr>";
     detail+="<tr style='display:block; margin-bottom:-20px;'><td style='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;佣金及其他费用:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+commison+"</td></tr>";
//     detail+="<tr style='display:block; margin-bottom:-20px;'><td style='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;总货款:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;'>&nbsp;&nbsp;"+totalPrice+"</td></tr>";
     detail+="<tr style='display:block; margin-bottom:-20px;'><td style='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;需支付金额:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;' id='payPrice'>&nbsp;&nbsp;"+payPrice+"</td></tr>";
     detail+="<tr style='display:block; margin-bottom:-20px;'><td style='width: 162px; border-left:1px solid #dddddd;border-top:1px solid #dddddd; height:30px;background-color:#ACD6FF;'>&nbsp;&nbsp;剩余待支付金额:</td><td style='width: 602px; border-left:1px solid #dddddd;border-top:1px solid #dddddd;border-right:1px solid #dddddd; height:30px;color:red;' id='surplusPayPrice'>&nbsp;&nbsp;"+payPrice+"</td></tr>";
    
     detail += '</table>';
     document.getElementById('detail').innerHTML = detail;

 

其中包括，设置背景色和字体颜色效果(蓝色标识)

 

3.效果图