HTML下css设置使表格的td之间取消间隙

2021-08-12 1074点热度 0人点赞 0条评论

问题描述

如图,用HTML画了一个表格,给表格加上了border,却发现每个td之间总有一点点间隙,影响美观

HTML代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
        body {
            font-size: 14px;
        }
        * {
            margin: 0;
            padding: 0;
        }
        .mytable {border-left:#b7cee2 solid 1px;border-top:#b7cee2 solid 1px; width:100%;}
        .mytable  th, .mytable td{border-right:#b7cee2 solid 1px;border-bottom:#b7cee2 solid 1px;}
        .mytable  .bg_gray{background:#EEEEEE;}
        .mytable  th{text-align:center; font-size:14px; height:52px; vertical-align:middle;}
        .mytable  th small{font-size:10px; font-weight:normal;}
        .mytable  td{height:38px; vertical-align:middle; text-align:center;}
    </style>
</head>
<body>

    <div style="padding: 10px;">
        <table class="mytable">
            <tbody>
            <tr>
                <td class="bg_gray">8月9日 星期一</td>
                <td>某某功能</td>
            </tr>
            <tr>
                <td>8月9日 星期一</td>
                <td>某某功能</td>
            </tr>
            <tr>
                <td>8月10日 星期二</td>
                <td>某某功能2</td>
            </tr>
            <tr>
                <td>8月9日 星期一</td>
                <td>某某功能</td>
            </tr>
            <tr>
                <td>8月10日 星期二</td>
                <td>某某功能2</td>
            </tr>
            <tr>
                <td>8月9日 星期一</td>
                <td>某某功能</td>
            </tr>
            <tr>
                <td>8月10日 星期二</td>
                <td>某某功能2</td>
            </tr>
            <tr>
                <td>8月9日 星期一</td>
                <td>某某功能</td>
            </tr>
            <tr>
                <td>8月10日 星期二</td>
                <td>某某功能2</td>
            </tr>
            <tr>
                <td>8月9日 星期一</td>
                <td>某某功能</td>
            </tr>
            <tr>
                <td>8月10日 星期二</td>
                <td>某某功能2</td>
            </tr>
            </tbody>
        </table>
    </div>

</body>
</html>

问题解决

给table加上css: style="border-collapse:collapse"便可解决

.mytable {border-left:#b7cee2 solid 1px;border-top:#b7cee2 solid 1px; width:100%; border-collapse:collapse;}

如图,现在舒服了!

border-collapse说明如下:

border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下,相邻的单元格都拥有独立的边框。在合并模式下,相邻单元格共享边框。

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论