table中如何消除td间距

表格结构
html5制作表格时,只是简单的想要实现表格内有边框,结果出现了双边框和单元格独立(有间距)的问题

table tr {
    font-size: 12px;
}

table tr:first-child {
    font-weight: bold;
    font-size: 14px;
    color: #fff;
    background-color: #333;
}

table tr:last-child {
    font-weight: bold;
    font-size: 14px;
    background-color: #aaa;
}

table {
    border-collapse: collapse;//重点在这里
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

table td {
    padding: 5px;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
<table>
                <tr>
                    <td>表头</td>
                    <td>表头</td>
                    <td>表头</td>
                </tr>
                <tr>
                    <td>表内容单元格</td>
                    <td>表内容单元格</td>
                    <td><a href="#">操作</a></td>
                </tr>
                <tr>
                    <td>表内容单元格</td>
                    <td>表内容单元格</td>
                    <td><a href="#">操作</a></td>
                </tr>
                <tr>
                    <td>表内容单元格</td>
                    <td>表内容单元格</td>
                    <td><a href="#">操作</a></td>
                </tr>
                <tr>
                    <td>表内容单元格</td>
                    <td>表内容单元格</td>
                    <td><a href="#">操作</a></td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td colspan="2">1000</td>
                </tr>
   </table>

图片变化前后如下
双边框 单元格独立

简单线条

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值