CSS样式简单实现Table没有外边框只有内边框

  发布时间:2014-06-13 10:15:56   作者:佚名   我要评论
Table默认是有外边框,有内边框的,那么如何通过css样式简单实现Table没有外边框,只有内边框呢?下面有个不错的示例,大家可以看看
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

效果图:
 
实现方法:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
border-collapse: collapse;
border: 0px solid #999;
}
table td {
border-top: 0;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 0;
}
table tr.lastrow td {
border-bottom: 0;
}
table tr td.lastCol {
border-right: 0;
}
</style>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>籍贯</td>
<td>出生年月</td>
<td>学历</td>
<td class="lastCol">外语程度</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td class="lastCol">666</td>
</tr>
<tr class="lastrow">
<td>11122</td>
<td>222111</td>
<td>333444</td>
<td>444555</td>
<td>555555</td>
<td class="lastCol">666777</td>
</tr>
</table>
</body>
</html>

测试通过!

相关文章

  • Dreamweaver中怎么让html网页中的table边框细线显示?

    Dreamweaver中怎么让html网页中的table边框细线显示?Dreamweaver中插入表格默认是宽边框的,看上去很难看,该怎么将边框设置成细线呢?请看下文详细介绍,需要的朋友可以
    2016-03-10
  • 一个属性border-collapse解决Table的边框问题

    表格的边框算是页面制作中最头痛的,带边线的表格在之前非常讨厌做,不过今天终于解决了这个问题,下面将示例与大家分享下
    2014-03-26
  • CSS控制Table内外边框、颜色、大小示例

    在默认的情况下,我们的CSS将Table的边框清除掉了,下面与大家分享下CSS控制Table内外边框、颜色、大小的样式,想学习的朋友可以参考下
    2013-08-01
  • css让table不显示边框的代码在火狐和谷歌浏览器中无效

    在css中已经写好了使table不显示边框的代码,在ie浏览器中显示正常,但是在火狐和谷歌浏览器中显示不正常,table的每个边框都显示了出来,因为浏览器不同带来的麻烦可是不
    2013-06-26
  • HTML table表格边框的控制详细说明

    表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不影晌单元格。
    2011-04-01
  • 用CSS设置表格Table的细边框的比较好用的方法

    大家经常会发现Table的BORDER设置为1,得到的边框却不是想要的1个像素的细边框,于是很多人去想方设法做出细边框的效果。
    2010-06-23
  • 用CSS样式描述表格Table边框

    表格边框的处理是CSS网页布局中经常会遇到的内容,在webjx.com中也有过相关的介绍,除了将表格作为一个整体进行定义,您也可以将表格边框的四个部分分别进行定义,包括顶部
    2010-01-23
  • 网页表格边框的设置方法

    前面学了网页表格中的单元格线条的设置方法,今天学习网页表格的边框线的设置方法。 ------------------------------------------------------------------------------
    2008-10-17
  • 网页表格表框制作技巧

    网页表格表框制作技巧。 -------------------------------------------------------------------------------- 表格边框的显示与隐藏,是可以用frame参数来控制的。请
    2008-10-17
  • Table显示你要显示的边框代码

    这篇文章主要介绍了Table显示你要显示的边框代码的相关资料,需要的朋友可以参考下
    2016-05-03

最新评论

?


http://www.vxiaotou.com