Home > Web Front-end > CSS Tutorial > Two ways to achieve a 1px thin border using border-spacing and cellspacing in CSS

Two ways to achieve a 1px thin border using border-spacing and cellspacing in CSS

黄舟
Release: 2017-06-30 10:06:21
Original
3443 people have browsed it

After learning table, I will find two borders every time, which does not look pleasing to the eye. If the border is set to 0, it is not good. So how to make a table with thin borders? It is about 1px. After consulting relevant information, I found 2 ways to solve this problem, as follows:

The first method:

#message{border-collapse:collapse;border:1px solid red;}
#message th,#message td{border:1px solid red;}
<table id=”message”>
<tr>
<th>出生年月</th>
<td>1989年1月22号</td>
</tr>
<tr>
<th>性别</th>
<td>男</td>
</tr></table>
Copy after login

Second method:

#message{border-spacing:1px;background:red;}
#message tr{background:purple;}
..........
..............
................
Copy after login

The above is the detailed content of Two ways to achieve a 1px thin border using border-spacing and cellspacing in CSS. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template