时间:2021-05-08
其实按照常理来说,现在的网站应该早已经抛弃什么表格了,现在肯定是DIV+CSS当道嘛!不过客户的网站在添加内容的时候始终不满意那些边框效果:要么没有,要么很粗。看得出来,这位客户是位完美主义者。
在默认的情况下,我们的CSS将Table的边框清除掉了,是没有的,看到的效果是这样的。
无边框Table
为了给,表格加一个边框,我在CSS里面写了这样一句:
.table{border:solid 1px #add9c0;}
哎,看来是我太天真了,浏览器里看到的效果是这样的:
只有外边框的Table
好吧,我承认,我确实已经有些年头没有动过Table了,不过这完全不是我的责任,因为Table其实已经被大众设计师们抛弃了。于是我就删掉那句CSS样式,重新这样写了这样一句:
.td{border:solid 1px #add9c0;}
不过杯具依然发生,像客户要求这么细的人,怎么能忍受Table表格的内边框这么粗呢?
内边框很粗的Table
没有办法,只好出绝招了,删掉刚刚写的CSS代码,直接写入:
.td{border:solid #add9c0; border-width:0px 1px 1px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}
好了,这下看你还敢嚣张?这不就乖乖地就范了吗?
边框很细的Table
亲密无间是没有罪过的,但是文字内容和表格边框亲密到没有空隙就影响到美观了,于是将刚刚那两句代码稍作修改:
.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding-left:10px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}
如果需要td两边都不需要那么亲密的话,就这样写:
.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding:10px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}
好了,现在来看看最后的效果吧,这个时候客户已经非常开心了,他要的就是这个效果!
理想效果的Table
如果大家在其他地方用到这样的方法的时候,一定要注意CSS代码的规范写法:
推荐写法:border-width:0px 1px 1px 0px;
不推荐:border-width:0 1 1 0;
最后还是提醒大家,能不用Table就尽量不要用Talbe吧,毕竟不是多么先进的技术了,应该试着往DIV+CSS这方面努力!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
excel制作表格的方法是: 1、打开电脑,打开一个excel表格。 2、选中要制作的多个单元格,进行设置。 3、设置内外边框,可以设置边框颜色等样式。4
用excel来进行制表,如何给表格进行添加内外边框线,这里就详细地介绍下,一起随小编去看看具体的操作吧!方法:1、首先是打开需要添加内外边框的excel表,图为
【问题】外层table与内层table嵌套,内外表格都需边框时,设置“border=1”,但边框会重复,造成某些地方边框粗,有些地方边框
CSS3之边框多颜色Border-color是专为边框的多颜色而准备的属性。在CSS2中也有边框颜色这个属性,但是边框颜色属性在CSS3中又有什么惊人之举呢?下
盒模型主要定义四个区域:内容(content)、内边框距(padding)、边框(border)和外边距(margin)。自从1996年CSS1的推出,W3C组