热门推荐

    [CSS教程] html+css合并表格边框的示例代码

    百宝网 Lv.7 显示全部楼层 发表于 2021-8-19 19:43:46
    我们给table和td标签加边框时,默认使用双边框,像这样。

    2021033117064679.png

    2021033117064679.png


    如果我们希望合并table与td的边框,可以在table样式加设置border-collapse的属性值为collapse即可。如下图:

    2021033117064680.png

    2021033117064680.png


    再看效果:

    2021033117064681.png

    2021033117064681.png


    为了便于复制,这里给出代码:
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         table{
    9.             border: 1px solid blue;/*表添加边框*/
    10.             border-collapse: collapse;/*合并边框*/
    11.         }
    12.         td{
    13.             border: 1px solid blue;/*单元格添加边框*/
    14.         }
    15.     </style>
    16. </head>
    17. <body>
    18.     <table>
    19.         <tr>
    20.             <td>1.1</td>
    21.             <td>1.2</td>
    22.         </tr>
    23.         <tr>
    24.             <td>2.1</td>
    25.             <td>2.2</td>
    26.         </tr>
    27.     </table>
    28. </body>
    29. </html>
    复制代码

    到此这篇关于html+css合并表格边框的示例代码的文章就介绍到这了,更多相关html合并表格边框内容请搜索百宝网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持百宝网!
    回复

    使用道具 举报

    发表回复

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

  • 返回顶部

  • 快速回复 返回顶部 返回列表