| 早期在CSS不是很盛行的时候,就有很多朋友在追求着做细线表格的方法,网上也流传着一些方法,记得以前我这个乡下人也收集过,不过不知道有没有放在blog里,人懒也就不去翻了,有爱好的朋友随便就翻翻吧。不过今天呢,我想跟大家说说的捏就是以前我自己是没接触的一个方法,不知道大家晓得不啦。假如晓得那就甭看下去了,浪费宝贵时间不好;假如不晓得的朋友可以借鉴一下,还不错的哦。
首先呢还是给大家看一下以前个人比较常用一个方法,表格套表格你也模糊挖。简单说一下这个方法:最外面一个大的一行一列的表格,设置单元格颜色(也就是后面的边框色);然后套一个你需要的表格,间距为1就,并把每个单元格的背景色设置为白色。
这里方法麻烦的就是表格套表格,而且代码也比较多比较杂,当然也是可以用CSS来简化一下,可惜简化的也只能是样式,没办法解决表格套表格的问题。 HTML代码
然后呢再说一下今天的“主角”,用CSS样式来控制表格,把它变成细线表格。大家都知道在CSS中border是可以控制边框的样式跟颜色的,但是假如用一个表格加上border样式的话,那是要加在table呢还是tr或者是td里呢,如<table style="border:1px solid #F00">或者<tr style="border:1px solid #F00">或者<td style="border:1px solid #F00">,其实加哪个都不好,假如是table那就是外边框有细线了,假如是tr那就是该行是细线了,而假如是td呢,那基本上可以说满足我们的需求了,但是可以发现有的地方线条是粗的。为什么呢,其实很简单,因为td跟td之间有重叠的位置啊,所以就是2px而不是我们要的1px线了;那假如针对td做的border不是四边而是对border-top、border-right、border-bottom、border-left分别在需要的位置设置呢,这个当然可以实现要求了,不过这样的话,代码就增加了很多。
其实简单的方法还是有的,只要把td跟td之间的重叠位置的线条合并在一起就可以了,先看一下这个效果。
|
| 共2页: 上一页 1 [2] 下一页 |
评论加载中…