兼容所有的浏览器表格细边框相间颜色样式

来源:互联网 发布:你见过最浪的女生知乎 编辑:程序博客网 时间:2024/05/16 12:44

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.wapper{
width:600px;
}
.wapper table, .wapper table td{
border-collapse:collapse;
border:1px solid #c1dad7;
}
.wapper table td{
padding:5px 0;
text-align:center;
vertical-align:middle;
}
.wapper table td.bgcolor1{
background:#f5fafa;
}
.wapper table td.bgcolor2{
background:#fcfcfc;
}
.wapper table td.tal{
text-align:left;
}
</style>
</head>

<body>
<div class="wapper">
 <table border="1" width="100%">
  <tr>
   <td width="13%" rowspan="4" class="bgcolor2">照片</td>
   <td width="15%" class="bgcolor1">姓名</td>
   <td width="14%" class="bgcolor1">张三</td>
   <td width="13%" class="bgcolor1">部门</td>
   <td width="45%" class="bgcolor1">软件工程分院招生办</td>
  </tr>
  <tr>
   <td class="bgcolor2">招生的区</td>
   <td colspan="3" class="bgcolor2"></td>
  </tr>
  <tr class="bgcolor1">
   <td class="bgcolor1">联系电话</td>
   <td colspan="3" class="bgcolor1"></td>
  </tr>
  <tr>
   <td class="bgcolor2">招生地址</td>
   <td colspan="3" class="bgcolor2"></td>
  </tr>
  <tr>
   <td colspan="5" class="bgcolor1 tal">备注</td>
  </tr>
  <tr>
   <td colspan="5" class="bgcolor2 tal">这里填写备注</td>
  </tr>
 </table>
</div>
</body>
</html>

原创粉丝点击