使用html中table实现td边框效果的方法-创新互联

这篇文章主要介绍了使用html中table实现td边框效果的方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

成都创新互联公司主营韩城网站建设的网络公司,主营网站建设方案,app开发定制,韩城h5小程序制作搭建,韩城网站营销推广欢迎韩城等地区企业咨询

 
 
 
 
 
  


   

    

    
隐藏右边框
    
隐藏左边框
    
    

    
隐藏上边框
    
隐藏下边框
    
   
 
   

    

    
显示右边框
    
显示左边框
    
显示上边框
    
显示下边框
    
   
 
   

    

    
右边框显示细虚线
    
下边框显示粗虚线
    
上边框显示两条线
    
左边框显示点
    
   

   
  

 
 

效果如下：

.表格中边框的显示

只显示上边框

只显示下边框

只显示左、右边框

只显示上、下边框

只显示左边框

只显示右边框

不显示任何边框

.表格的分隔线可以隐藏

可以隐藏横向的分隔线

可以隐藏纵向的分隔线

可以隐藏横向和纵向的分隔线

sadad	sad	dsa	asd
ads	asd	ads	asds

table width=1 就已经把宽度设置为 1 了
我们面临的问题是这样的，每一个 td 边线都是 1px，table 边线也是 1px。那么当两个td相邻的时候，因为每个 td 边线都是1，所以靠进的时候边线的“宽度和”就是 1+1=2。当 td 和 table 相邻时，同样。

collapse :　 相邻边被合并
相 邻边被合并！以前我说的 1+1=2 就是因为 td 和td之间，td 和table 之间相邻边的问题。默认时相邻边没有合并，所以就是 1+1=2。现在我们使用 border-collapse:collapse把我们合并了，所以宽度还是 1px。也就是出现细线边框了

设置Table的细边框通常有这么几种方式：

1、设置边框的cellspacing=1，设置Table的背景色为所要的边框色，再设置所有的td背景色为白色，这样细边框就显露出来了。这个方法有些邪气，看似不太正宗，但是也能达到效果，条条大路通罗马嘛！

再来看看第二种方法：

2、设置，再通过CSS，给Table加上1px的border-top,border-left，然后再设置所有的td的border-right,border-bottom，这样也能达到所要的效果。可见CSS很是强大啊。

今天在实践过程中发现，以上两种方式生成的HTML在Word中打开则发生问题，不能达到预期效果。怎么办呢！？

下面介绍一种更为简便有效的方法：

3、border-collapse:collapse;border:none;},再设置td的CSS为

感谢你能够认真阅读完这篇文章，希望小编分享使用html中table实现td边框效果的方法内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站标题：使用html中table实现td边框效果的方法-创新互联
文章分享：http://mswzjz.cn/article/pphid.html