border-collapse实现表格细线边框 - JUN's Blog
来源:百度文库 编辑:神马文学网 时间:2024/04/28 02:07:29
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 {border-collapse:collapse;}
- td {border:1px solid #666;}
1 2 3 4 5 6 7 8 9 10 11 12
下面顺便带上CSS border-collapse 属性:
CSS border-collapse 属性
定义
border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
继承性:Yes
脚本语法:
CSS 属性也可通过一段 JavaScript 被动态地改变。
object.style.borderCollapse="collapse"
例子
table
{
border-collapse: separate;
}
可能的值
border-collapse实现表格细线边框 - JUN's Blog
细线表格制做
细线表格制做
细线表格制做
细线表格制做
用代码制作细线表格
collapse
jun
S边框
表格边框代码应用
表格颜色代码做边框
表格颜色代码做边框
表格边框代码
CSS属性 - border-bottom-style 下边框风格属性
QListView实现表格驱动
Cambodia, Thailand to peaceful solve border issue: U.S. official
【学习表格边框代码应用】
经典边框素材s
Rapid development would not lead to China's collapse but reform
Photoshop为照片打造半透明细线边框ps教程,photoshop下载,photosh...
CSS基础:CSS2盒模型 - Martin‘s Blog~~愿望,在今生实现
[学习]ASP实现点击链接直接下载文件 - Rian‘s blog
jun线图
表格背景渐变的实现