? table边框样式设置 html表格加css边框属性-CSS布局HTML 开元棋牌送彩金多少_开元棋牌作弊器苹果_新澳门棋牌游戏开元
您的位置:CSS5 > K开元棋牌 >

table边框样式设置 html表格加css边框属性

发布日期:2018-03-15 22:57:52 来源:WWW.CSS5.COM.CN

html网页布局table时,table表格自带有边框样式,但是默认的边框样式不好看,需要重新使用CSS样式给table表格添加单线边框。

一、初始化

要设置table的边框需要先将table边框等属性重置清零。

html代码:
table标签内设置0间距,避免设置边框td之间有间隔:

css代码:

table,tr,td{ border:0; padding:0} 

初始化边框,让td与内容没有间距,同时初始化让其没有边框。

初始化目的,让所有浏览器兼容,避免不同浏览器默认CSS样式不同,同时为后面布局统一兼容性。

二、只设置table边框

在初始化table样式后,只设置边框table最外边框样式,只需要对table设置一个边框样式即可。

html代码:























栏目一栏目二栏目三栏目四栏目五
内容内容2内容内容内容
内容内容内容内容内容

CSS代码:

table,tr,td{ border:0; padding:0}
.tables{border:1px solid #666}

对table初始化后,加入class=tables,只设置table的边框。

只设置table最外边框
只对table最外设置边框样式。

三、让table td边框表格效果

要布局效果:

table 边框最终布局效果

如果对td设置边框,那么紧贴相邻的td就会出现双边框效果,这个时候需要一个技巧,对td只设置上或下、左或右边框,这样布局出需要的边框样式,但会出现最下或上,右或左少一条边框,解决这个问题,通过对table再设置一个下或上边框,右或左边框,这样即可完美布局出想要的table边框样式。

完整CSS + HTML代码





表格table边框布局 CSS5
























栏目一栏目二栏目三栏目四栏目五
内容内容2内容内容内容
内容内容内容内容内容


效果

table布局边框

利用了table和td单边框设置,实现想要的table边框效果。?

标签(Tag): 边框 表格 table
本文分享URL地址:https://www.css5.com.cn/biji/1573.shtml

作者:CSS5原创

上一页:上一篇:css给html div设置边框 加虚线实体线框样式
下一页:下一篇:图片img标签内添加alt标签但是鼠标放上去不显示文字