HTML + CSS merge table border example code

Time:2021-9-14

When we add borders to table and TD tags, we use double borders by default, like this.

在这里插入图片描述
 

If we want to merge the borders of table and TD, we can set the border collapse attribute value to collapse in the table style. As shown below:
 

在这里插入图片描述
 

Look at the effect again:
 

在这里插入图片描述
 

In order to facilitate copying, the code is given here:

<!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;/* Add border to table*/
            border-collapse: collapse;/* Merge border*/
        }
        td{
            border: 1px solid blue;/* Add borders to cells*/
        }
    </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>

This is the end of this article about the sample code of HTML + CSS merged table border. For more information about html merged table border, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!