CSS如何设置table表格边框样式
对table设置边框分为几种情况:
1、只对table设置边框
3、对table和td技巧性设置表格边框
4、对table和td设置背景,实现完美表格边框
以下对以上几种实现html 表格进行讲解与案例演示为了便于观察,divcss5均设置所有案例表格为1px实线红色为例;为400px;表格为三列三行对以上四种情况表格外层加个,分别为“.table-a”、“.table-b”、“.table-c”、“.table-d”
只对table标签设置(边框)样式,将让此表格最外层table一个边框而表格内部不产生边框样式。
对table表格td设置边框样式表格对象內td将实现边框样式,但中间部分td会导致出现双边框
如上第二点,只对表格对象td设置单一边框样式中间部分td与td标签之间就会出现双边框現象。
解决方法:对td只设置两个边的边框对table也设置两个边的边框样式。
解释:对td设置左与上边框这样td与td相邻就会只出现单一边框样式,这样就会出现表格右侧和下部没有边框这个时候我们设置table右和下 边框解决显示右侧和下侧td剩下未显示边框。
- 为了便于截图我们将css 注釋说明换行排版
2、对应html源代码片段:
3、表格边框实现案例截图