如何使用html中table实现td边框的效果（代码）

程序猿 • 2025年12月21日 18:11:14 • 好文分享 • 阅读 0

今天给大家分享一篇关于HTMLtable各种边框效果实现的文章，内容主要介绍了在HTML利用table设置边框的各种操作，有需要的朋友可以参考一下。

table边框测试

隐藏右边框	隐藏左边框
隐藏上边框	隐藏下边框

显示右边框

显示左边框

显示上边框

显示下边框

右边框显示细虚线

下边框显示粗虚线

上边框显示两条线

左边框显示点

效果如下：

.表格中边框的显示

只显示上边框

只显示下边框

只显示左、右边框

只显示上、下边框

只显示左边框

只显示右边框

不显示任何边框

.表格的分隔线可以隐藏

可以隐藏横向的分隔线

可以隐藏纵向的分隔线

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

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

再来看看第二种方法：

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

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

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

3、设置table的CSS为{border-collapse:collapse;border:none;},再设置td的CSS为{border:solid #000 1px;}，大功告成！而且Word也能认出这种设置。

第三种方法最好，我也是在导出word时，很多css失效的情况下，找到了这个解决办法！

如何使用html中table实现td边框的效果（代码）

关于作者

程序猿签约作者

发表回复