表格样式
1、
/*.mainright table{ width:100%; border:1px solid #dddddd; line-height:27px; border-radius: 10px;
background-color:#fff; margin-top:15px;}
.mainright table th,.mainright table td{ border-bottom:1px solid #ddd;}
.mainright table th{ text-align:center; color:#53a4c6;}
.mainright table td{ text-align:center;}
.datalist tr.altrow{background-color:#f6f6f6; }
.mainright table tfoot{ line-height:40px;}
.mainright table .on{ background-color:#e5f4ff; cursor: pointer;}*/
2、
table{ margin:0 auto; width:99%;background-color:#FFF;}
table,table td{ border:1px solid #CCC; border-collapse:collapse; }
table th{ border:1px solid #0066cc; border-collapse:collapse; }
table td,table th{ line-height:18px; padding:5px 0; word-break:break-all;} /* 行距缩小，增加上下边距 */
table thead th{ background: #0099cc url(../img/tabletitlebj.png) bottom repeat-x; text-align:center; color:#FFF;}
table tbody td{ padding:0 5px;}
table tfoot td{ background-color:#eee;}
table tfoot td div{float:left;}
<style><!--
.content {
background-color: #8BF;
margin: 5px;
padding: 5px;
width: 98%;
color: magenta;
font-size: 16px;
font-weight: 600;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.content span {
padding: 3px;
border: 0px;
background-color: #FC9;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
--></style>
<p> </p>
<p> </p>
<p> </p>
<p class="content"><span>一、新闻客户端布局代码</span></p>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function show(jsondata){ var jsonobjs = eval(jsondata); var table=document.getElementById("personTable"); for(var y=0;y<jsonobjs.length;y++){ var tr = table.insertRow(table.rows.length); var td1=tr.insertCell(0); td1.align="center"; var td2=tr.insertCell(1); td2.align="center"; var td3=tr.insertCell(1); td3.align="center"; td1.innerHTML=jsonobjs[y].type; td2.innerHTML="<a href='javascript:contact.call(\""+jsonobjs[y].remark+"\")'>"+jsonobjs[y].remark+"</a>"; td3.innerHTML=jsonobjs[y].state; } } </script> <style type="text/css"> #personTable tr{ BACKGROUND-COLOR: #F4FAFF;} </style> </head> <body onload="javascript:contact.showContacts()"> <table width="100%" border="0" cellpadding="2" cellspacing="0"> <tr> <td width="100%"> <table border="0" id="personTable" cellpadding="3" cellspacing="1" width="100%" align="center" style="background-color: #b9d8f3;"> <tr style="text-align: center; COLOR: #0076C8; BACKGROUND-COLOR: #F4FAFF; font-weight: bold"> <td width="20%" align="center">类型</td> <td align="center" >订单说明</td> <td width="20%" align="center">订单状态</td> </tr> </table> </td> </tr> </table> <a href="javascript:window.location.reload()">刷新</a> </body> </html>
上面的代码可以使表格显示出分割线，如下图
