Rumah > hujung hadapan web > tutorial css > CSS中border-spacing和cellspacing如何实现1px细边框的两种方法

CSS中border-spacing和cellspacing如何实现1px细边框的两种方法

黄舟
Lepaskan: 2017-06-30 10:06:21
asal
3443 orang telah melayarinya

学习table后,每次都会发现有2个边框,看上去不大顺眼,如果将边框设置为0,那也不大好,那如何做个细边框的table呢?大概是1px,通过查阅了相关的资料,让我找到了2种解决这个的方法,如下:

第一种方法:

#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>
Salin selepas log masuk

第二种方法:

#message{border-spacing:1px;background:red;}
#message tr{background:purple;}
..........
..............
................
Salin selepas log masuk

Atas ialah kandungan terperinci CSS中border-spacing和cellspacing如何实现1px细边框的两种方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan