Heim > Artikel > Web-Frontend > 如何使用CSS实现细线表格效果_html/css_WEB-ITnose
如何使用CSS实现细线表格效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:39922Durchsuche
如何使用CSS实现细线表格效果:
虽然在使用布局的时候不提倡使用table，但是table并非是一个不能使用的元素，只要和CSS配合使用得当，还是具有相当的威力，并且在特地的情况使用table比使用div更有优势，例如在制作表格，但是表格自带的边框比较丑陋，下面介绍一下如何使用CSS实现细线表格效果。代码实例如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">table{ width:300px; height:60px; background-color:green;}table td{ background-color:white;}</style></head><body><table cellspacing="1"> <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></body></html> 以上代码通过设置table的cellspacing属性值为1px，然后再设置table的背景颜色为绿色，再将单元格的背景颜色设置为白色，那么就能够显露出来1px的“边框”效果。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0504/725.html
最原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4645
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：关于CSS的一些总结_html/css_WEB-ITnoseNächster Artikel：使用CSS如何实现截取标题并用省略号表示超出部分_html/css_WEB-ITnose