table中如何消除td间距

来源：互联网发布：淘宝在哪里搜店铺? 编辑：程序博客网时间：2024/04/30 05:43

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

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

简单线条

0 0