天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件 > 网页>评测>CSS去除表格默认样式的间距

CSS去除表格td默认间距及制作1px细线表格

Levelup2007-11-06 17:48我要吐槽

  现在在所谓“div+css”的风气下,很多人放弃了表格,其实应该让每个标签物尽其用,在表现数据的地方,我们还是应该使用table。但是,我们在建立table的时候,会发现它会具有一些默认的样式,比如单元格td之间会有间距,所以我们通常开头是这样写的:

以下是引用片段:
<table border="0" cellspacing="0" cellpadding="0">

  在页面内,通过cellspacing="0"将这个间距消除,合并边框。现在,我们要一个干净的表格table。

以下是引用片段:
<table class="dir"> 
<caption>如何通过CSS去除表格默认样式的间距</caption> 
 <tr> 
   <th>test</th> 
   <th>test</th> 
   <th>test</th> 
 </tr> 
 <tr> 
   <td>test</td> 
   <td>test</td> 
   <td>test</td> 
 </tr> 
</table> 

  我们只要给这个table一个border-collapse:collapse的样式,就可以达到这个效果了。

以下是引用片段:
.dir{ width:100%; border-left:#C8B9AE solid 1px;border-top:#C8B9AE solid 1px;border-collapse:collapse;} 
.dir td{width:25%;border-right:#C8B9AE solid 1px;border-bottom:#C8B9AE solid 1px;background-color: #D7D1CB;padding:10px 10px 6px;vertical-align: top;}

  这样,我们达到了所需要的效果,并且,上面的css样式还把表格table定义成了1px的细线表格。

  在没有对table进行内部样式定义,而通过样式表,成功的去除td默认的间距,以及定义为1象素的细线表格。真正做到了结构与表现的分离。

作者:佚名责任编辑:兜兜猫)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
热点推荐
微软Windows 10操作系统Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。[详细]
Windows 10 新视界 [进入频道][使用技巧][微博互动]
手机整机DIY企业级