CSS表格属性:
显示表格边框有时候特别重要,它能让表格结构更清晰。
默认的表格有双边框,这是因为表和th/ td元素有独立的边界。border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开。
CSS即层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS控制表格横向显示Html代码: <div style="position:relative"><table class="t1"><tr><td>1</td></tr></table><table class="t2"><tr><td>2</td></tr></table><table class="t3"><tr><td>3</td></tr></table></div>CSS代码:<style type="text/css">.t1, .t2, .t3 {width:100pxposition:absolute}.t2 {top:0left:100px}.t3 {top:0left:200px}</style>结构呢?我觉得挺像。好,Div的结构搞定了,下面就用CSS去控制它:equal{display:tableborder-collapse:separate}.row {display:table-row}
.row div {display:table-cell}
.row .one {width:200px}
.row .two {width:200px}
.row .three {}
上面说一下上边各个CSS属性的意义:
1.dispaly:table让.equal层作为块级元素的表格来显示,也就是将显示成表格的样子
2.border-collapse:separate边框独立,就像表格没有合并单元格以前
3.display:table-row将.row作为表格行tr显示
4.display:table-cell将.row的下级div作为表格单元格td显示
使用border-spacing:10px主要是来区分几个盒子,因为IE下不能正常显示,但是在:Mozilla、Opera、Firefox、Chrome下都是可以的。