html+css合并表格邊框的示例代碼

發(fā)布時(shí)間：2021-03-31 17:10:17 作者：程序猿想成程序獅

這篇文章主要介紹了html+css合并表格邊框的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

我們給table和td標(biāo)簽加邊框時(shí)，默認(rèn)使用雙邊框，像這樣。

在這里插入圖片描述

如果我們希望合并table與td的邊框，可以在table樣式加設(shè)置border-collapse的屬性值為collapse即可。如下圖：

在這里插入圖片描述

再看效果：

在這里插入圖片描述

為了便于復(fù)制，這里給出代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border: 1px solid blue;/*表添加邊框*/
            border-collapse: collapse;/*合并邊框*/
        }
        td{
            border: 1px solid blue;/*單元格添加邊框*/
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
    </table>
</body>
</html>

到此這篇關(guān)于html+css合并表格邊框的示例代碼的文章就介紹到這了,更多相關(guān)html合并表格邊框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！