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>

图片变化前后如下