日历控件table布局
作为初学者,一开始就接触div+css ,所以说实话,我并不怎么喜欢table布局,一般逃避。
先上这次的效果图:
看到这个图,第一次用table布局没实现,原因是给tr加下边框失效。当时没找到原因,以前没用过table布局。
今天重新翻出来用table布局实现
dom结构是:div>table>caption+tr>td>a
其实这个布局本身没有什么难度,只是想说一下遇到的坑。
首先 对table设置 border=“0”,cellpadding="0" cellspacing="0"
清除掉这些默认样式,我以为直接对tr加个底边框一切就搞定了,好吧,试了半天还是不行。
对table 加属性 rules = ”none“ tr的底边框奇迹般的生效了。
rules的属性
none | 没有线条。 |
groups | 位于行组和列组之间的线条。 |
rows | 位于行之间的线条。 |
cols | 位于列之间的线条。 |
all | 位于行和列之间的线条。 |
但是最后一行的底边框没有出现,测试发现是table本身的底边框盖住了tr的,所以我直接给table加个底边框实现了。
测试:
ie6,7,FF不支持,chrome和ie8以上支持。
FF都不支持,心中一万头草泥马奔腾。
没办法 只能继续找bug了。终于找到为什么tr不能直接设置边框了
解释是:因为表格中的tr并非单一的边框,这样便需要属性border-collapse,border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是像在标准的 HTML 中那样分开显示。
属性:
separate 默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。
collapse 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承border-collapse 属性的值。
我觉得这个讲的很有道理的样子,立马加上。FF下正常了。把rules属性删掉,也是正常的。
说明确实是取决于这个属性。
ie6,7下解决方法:
试试给td加底边框,好吧,果然有效了。事情终于解决了。