如何消除表格中的間隙


一、問題再現

由於table表格本身具有特殊的cellspacing單元格間距,所以單元格之間默認是存在間隙的,如下圖所示:

如果不想要這個間隙那該怎么處理呢?方案有兩個。

二、解決方案

1.通過html的cellspacing參數值進行設置,代碼如下:

<table border="1" cellspacing="0"> //cellspacing是邊框與邊框之間的間隙大小,設置為0則表示單元格之間的距離為0
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
</table>

 效果圖:

2.通過CSS的border-collapse屬性值進行設置。代碼如下:

  table {
        margin: auto;
        /*    相鄰兩個邊框合為一個邊框 */
        border-collapse: collapse;
        background-color: pink;
    }

    td {

        width: 40px;
        height: 40px;
    }
</style>

<body>
    <table border="1">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

</body>

 效果圖:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM