How to set table border line with border-collapse attribute in css? (code example)

How to set the table border line with the border-collapse attribute in css? This article will introduce to you what the border-collapse attribute in CSS is? The border-collapse property sets the table border line. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s take a look at the css What is the border-collapse attribute? What it does.

border-collapse attribute: Set whether the borders of the table are merged into a single border, that is, used to set whether the table borders are merged or displayed separately.

Basic syntax:

border-collapse : separate | collapse ;

separate: Default value, the border will be separated, that is, a double-line border will be displayed.

collapse: If possible, the borders will be merged into one line, that is, a single-line border.

From this we can also see that the border-collapse attribute can set two table border line styles, namely: double-line border and single-line border.

Let’s take a look at the implementation of the two border line styles of the table through a simple code example

Implementation of the double-line table border

html Code:

<table>
    <tr>
        <td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
    </tr>
    <tr>
        <td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
    </tr>
    <tr>
        <td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
    </tr>
    <tr>
        <td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td>
    </tr>
</table>

css code:

table,table td{
    text-align: center;
    border: 1px solid #000;
    border-collapse：separate；
}
table  td{
    padding: 10px 30px;
}

Rendering:

The double-line style of the table border is actually very simple. As long as you set the outer border of the table and the border of each cell in the table at the same time, you can achieve it. Because separate is the default value, even if border-collapse: separate is not set; the table will still show a double-line effect. We are mainly going to take a look at the border-collapse attribute to merge the border and realize the method of single-line border. The html code is the same, just set the css style:

css code:

table,table tr td {
    border: 1px solid #000;
    text-align: center;
    border-collapse: collapse;
}
table tr td {
    padding: 10px 30px;
}

Rendering:

The implementation of the single-line border is also very simple. It is based on the double-line style and sets border-collapse: collapse; to collapse the two adjacent ones. The table borders are merged into one, so that two adjacent lines are merged together, and the borders are displayed as a single line.

Summary: Both the single-line border style and the double-line border style of table borders are widely used in front-end pages. You can use different styles according to your own needs. I hope it will be helpful to your learning. . For more related tutorials, please visit: CSS Basics Video Tutorial, HTML Video Tutorial, bootstrap Video Tutorial!

The above is the detailed content of How to set table border line with border-collapse attribute in css? (code example). For more information, please follow other related articles on the PHP Chinese website!