How to use the CSS attribute border-collapse to solve the table border problem

When we are laying out the page, in addition to pictures and text, the most used table is the table. For many people, the border of the table is quite annoying. I personally hate seeing it with multiple layers. The table with borders is extremely ugly. Do you know how to set the border of the table? Today I will talk to you about the border-collapse attribute in CSS. This attribute is very practical, but many people don’t know it yet. Come and take a look. Generally we write a table, which is written in the following way, give the table border and the style you want. The code is as follows:

HTML part:

<table class="aa">
   <thead>
    <tr>
     <th>序号</th>
     <th>姓名</th>
     <th>性别</th>
     <th>年龄</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td>张晗</td>
     <td>男</td>
     <td>23</td>
    </tr>
    <tr>
     <td>2</td>
     <td>陆颖</td>
     <td>女</td>
     <td>20</td>
    </tr>
    <tr>
     <td>3</td>
     <td>郝婷婷</td>
     <td>女</td>
     <td>19</td>
    </tr>
   </tbody>
  </table>

CSS part:

.aa{border: 1px solid #ccc;width:30%;text-align: center;border-collapse: collapse;}
.aa th,.aa td{border: 1px solid #ccc;padding: 10px;}

Look, the effect is like this:

##It It does not conform to our understanding of the table. How come there are so many border lines? Generally, we only need the outer border and the part shared by the cells, and do not need to have a border for each cell. So how to remove these extra borders? Next is the focus of today. The border-collapse in the CSS attribute can help us remove excess borders.

First let’s take a look at the border-collapse attribute value description. It has two values. Separate is the default value. The borders are separated and not merged. Collapse borders are merged. If they are adjacent, they share a border. Let's add this attribute to the table just now.

.aa{border: 1px solid #ccc;width:30%;text-align: center;border-collapse: collapse;}

Picture:

see it? When we apply border-collapse: collapse to the table, the table borders merge and become much more beautiful. You can use this attribute in future work, it is very useful. It is recommended that friends try it themselves, especially beginners. I hope this article can help you!

The above is the detailed content of How to use the CSS attribute border-collapse to solve the table border problem. For more information, please follow other related articles on the PHP Chinese website!