网页表格前增加行的序号

发布于 2010-10-24 作者 [重庆SEO]

本文来自百度空间博客搬家

2007年开始使用的是 hi.baidu.com/udjy
后来百度空间强制升级为轻博客 hi.baidu.com/imnoco
2015年百度关闭了百度空间

将网页的一些表格数据做成网页之后,想将网页中表格数据重新排序,用JS表格排序插件jquery tablesorter 搞定,后来又想在网页已有的表格中每一行前面增加行的序号

1.不破坏表格格式与数据;
2.与表格完美镶嵌;

开 始的时候就用javascript实现序号部分的DIV,然后用表格与JS序号部分左浮动就行了。样式的时候,觉得css控制序号部分和table部分左 浮动可以改进,后来觉得table固定在序号部分的右边也许好一点,刚开始的时候将序号和表格用固定的像素来控制,IE浏览器窗口变化的一定程度时,会有 横向滚动条,用户体验不好,用overflow-x,又有一些BUG,也不好,最后考虑用自适应宽度,序号4%,表格96%,表格固定在距离左边4%的位 置,搞定,IE浏览器窗口变大变小效果都比固定像素好,并且显示正常。

-----------------------------------

本 以为这样就行了,结果第二天不用IE8,用IE7测试的时候,问题出来了,之前直接将所有td标签弄了个边框,然后用border- collapse:collapse;就完了,结果低版本的IE无法像IE8那样正确解释,所以边框会变粗,导致与左边的JS行序号错位,以前碰到过这样 的table问题,直接将tr的4个边框改为2个相邻的边框,然后table设置另外2个相邻的边框,问题解决,可用FF3.6打开的时候tr的高度刚好 缺少一个边框的高度,导致table与序号错位,用@-moz-document url-prefix()搞定。chrome正常

关于浏览器HACK请浏览http://hi.baidu.com/udjy/blog/item/b51f7eed75949e4079f05581.html