border-collapse实现表格细线边框作者:5JUN 日期:2009-08-18虽然在xhtml+css 时代 table的使用越来越少,但需要布局数据型元素,用table还是很不错的选择。 用table制作表格的时候美观也很重要,其中的边框。在HTML中,表格的默认样式大概是这样: 默认的样式虽然有点立体的感觉,但它在整体布局中并不是很美观,通常情况下,我们会把table属性的cellspacing设成1,然后为整个表格设一 个背景色;或是设置table的border为0,然后为所有td设置border-left和border-right,可以得到如下效果: 这种方法比较常用,但是有些复杂,而且如果表格内容为空的情况下IE会不显示边框。 另一种方法就是用CSS中的border-collapse属性,它有两个参数
这里我们会用到: border-collapse:collapse; 在table中加入border-collapse:collapse;属性,并设置border为0,设置td{border:1px solid #ccc;}边框。就可以得到与第一种方法相同的效果。这种方法相对简单,而且在表格内容为空的情况下,边框不会出现不显示的情况。 CSS代码
简单TABLE代码
下面顺便带上CSS border-collapse 属性:
|
|