table中如何消除td间距

最新推荐文章于 2024-09-04 17:00:08 发布

文甜心

最新推荐文章于 2024-09-04 17:00:08 发布

阅读量1.5w

点赞数 1

分类专栏： css基础知识文章标签： html5

本文链接：https://blog.csdn.net/qq_34893429/article/details/59134214

版权

css基础知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

表格结构
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>