表格样式

1、
/*.mainright table{ 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; 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;}

<!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>

上面的代码可以使表格显示出分割线，如下图