切换为不分页显示
【首页】 【建站杂谈】 主题:CSS实现左右、上下不封闭边框的表格
字体:    回复
CSS实现左右、上下不封闭边框的表格 
听话的狗司机(2009-7-20 9:40:15)  点击:7596  回复:0  IP:60.5.39.*
CSS实现左右、上下不封闭边框的表格,在列表型数据显示的时候,为了还原真正的表格效果,有时候我们需要让表格的某些边框不显示,本代码片断就是一个很好的示例,它向我们演示了如何用CSS制作一个四周都没有边框以及左右没有边框的表格。
程序代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
table{border-collapse:collapse;border-top:3px solid #000;border-bottom:3px solid #000;}
.notVert{border:none; }
td,th{
width:60px;
border-right:1px solid #aaa;
border-bottom:1px solid #aaa;
text-align:center;
font-size:16px;
};
th{font-size:16px;font-weight:normal}
.last{border-right:none; }
.lastTr td{border-bottom:none; }
strong{color:red; }
</style>
</head>
<body>
<p>
<strong>四周(上下左右都不封闭)</strong>
</p>
<table cellspacing="0" cellpadding="2" class="notVert">
<tr>
<th>一月</th>
<th>二月</th>
<th>三月</th>
<th class="last">总计</th>
</tr>
<tr>
<td>29</td>
<td>38</td>
<td>65</td>
<td class="last">24</td>
</tr>
<tr>
<td>26</td>
<td>47</td>
<td>58</td>
<td class="last">4</td>
</tr>
<tr class="lastTr">
<td>56.45</td>
<td>665</td>
<td>76</td>
<td class="last">8</td>
</tr>
</table>
<p>
<strong>常用型,左右不封闭</strong>
</p>
<table cellspacing="0" cellpadding="2">
<tr>
<th>一月</th>
<th>二月</th>
<th>三月</th>
<th class="last">总计</th>
</tr>
<tr>
<td>22</td>
<td>112</td>
<td>52</td>
<td class="last">4</td>
</tr>
<tr>
<td>15</td>
<td>265</td>
<td>39</td>
<td class="last">4</td>
</tr>
<tr class="lastTr">
<td>72</td>
<td>43</td>
<td>521</td>
<td class="last">8</td>
</tr>
</table>
</body>
</html>

[返回]
[本主题共0回复 | 每页显示20回复]
 返回列表 跳至页首跳至页尾 放大字体 缩小字体
按用户名:    按标题:   按内容:       包括所有回复
【首页】→ 【建站杂谈】 回复:CSS实现左右、上下不封闭边框的表格
帖子标题:
   未登录!    

您的权限:
发表回复:×
UBB功能:×
文件上传:×
 
风格选择:极速  古韵  宽屏  大字  |  图示说明: 24小时新发主题  最近被编辑的主题  超过24小时普通主题
页面执行时间:125毫秒 | 在线:6 今日:156 合计:3234818 | 清除COOKIE |