Table边框让两个table看起来像一个

两表合一的HTML技巧

最新推荐文章于 2022-08-31 20:52:55 发布

cmnong

最新推荐文章于 2022-08-31 20:52:55 发布

阅读量5.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html 文章标签： table border c

本文链接：https://blog.csdn.net/guowenbin2008/article/details/6086372

html 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了两种在HTML中使两个表格看起来像一个整体的方法。第一种方法通过控制边框和间距实现无缝连接；第二种方法则利用了表格的边框折叠属性。这两种方法有助于创建整洁统一的视觉效果。

下面的代码，是用来显示让两个table看起来像一个table的控制，这个主要是边框线上的问题

第一种方法

<mce:style></mce:style><style mce_bogus="1"> tr{ text-align: center; COLOR: #000000; BACKGROUND-COLOR: #F4FAFF; } td{ border:1px #3399FF solid; } </style> <TABLE width="100%" style="background-color: #006600;border-bottom:0;" mce_style="background-color: #006600;border-bottom:0;"> <TR> <table border="1" cellspacing="0" width="100%" style="border-bottom:0;border-color:#3399FF;" mce_style="border-bottom:0;border-color:#3399FF;"> <tr><td width="20%">1</td><td width="20%">1</td><td width="20%">1</td><td width="20%">1</td></tr> <tr><td width="20%">1</td><td width="20%">1</td><td width="20%">1</td><td width="20%">1</td></tr> <tr><td width="20%">1</td><td width="20%">1</td><td width="20%">1</td><td width="20%">1</td></tr> </table> </TR> <TR> <table border="1" cellspacing="0" width="100%" style="border-top:0;border-color:#3399FF;" mce_style="border-top:0;border-color:#3399FF;"> <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr> <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr> <tr><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td><td width="20%">2</td></tr> </table> </TR> </TABLE>

第二种方法

关于Table属性和样式可以参考本连接。而table的 frame 和 rules属性可以参考本连接