首页 > 其他 > 详细

如何消除表格中的间隙

时间:2021-06-01 14:52:41      阅读:24      评论:0      收藏:0      [点我收藏+]

一、问题再现

由于table表格本身具有特殊的cellspacing单元格间距,所以单元格之间默认是存在间隙的,如下图所示:

技术分享图片

如果不想要这个间隙那该怎么处理呢?方案有两个。

二、解决方案

1.通过html的cellspacing参数值进行设置,代码如下:

<table border="1" cellspacing="0"> //cellspacing是边框与边框之间的间隙大小,设置为0则表示单元格之间的距离为0
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
</table>

 效果图:

技术分享图片

2.通过CSS的border-collapse属性值进行设置。代码如下:

  table {
        margin: auto;
        /*    相邻两个边框合为一个边框 */
        border-collapse: collapse;
        background-color: pink;
    }

    td {

        width: 40px;
        height: 40px;
    }
</style>

<body>
    <table border="1">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

</body>

 效果图:

技术分享图片

 

如何消除表格中的间隙

原文:https://www.cnblogs.com/xmt08042/p/14836027.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!