JavaScript Table行定位效果（5）
作者：cloudgamer 来源：cloudgamer博客 发布时间：2009-05-25 10:47:00
【设置td宽度】
接下来就要设置td宽度了，要获取某元素的宽度可以通过以下方法：
1，支持defaultView的可以直接用getComputedStyle获取width。
2，获取offsetWidth，再减去border和padding的宽度。
这个本来也可以，但td的border宽度的获取比较麻烦，下面有更方便的方法。
3，获取clientWidth，再减去padding的宽度。
这个跟方法2差不多，但更简单方便。
注意ie的currentStyle不像getComputedStyle能获取准确值，而只是一个设置值，像百分比、auto这些并不会自动转成准确值，即使是得到准确值也不一定是实际值，像td即使设置一个很大的准确值，实际值也不会超过table本身的宽度。
所以在td这种比较特殊的结构中，除非是很理想的状况，否则用currentStyle基本没戏，而且在这个效果中即使是差了1px也会看不舒服。
对于支持defaultView的当然可以直接获取，否则就用上面的方法3来获取：
style.width = (document.defaultView ? parseFloat(css.width)
: (o.clientWidth - parseInt(css.paddingLeft) - parseInt(css.paddingRight))) + "px";
但这里不管哪个方法都有一个问题，就是出现scroll的情况，不过还好td这个元素即使设置了overflow为scroll也不会出现滚动条，除了ie8和chrome。
程序没对这个情况做处理，毕竟给td设scroll也不常见，而且支持这个的浏览器不多，没必要花太多时间在这里。
ps：关于td宽度的自动调整可以参考w3c的table-layout部分。
如果有影响原td结构的设置，例如colspan之类的就要留意，错误的结构很可能导致一些异常变形。
如果对原表格结构或内容做了修改，应该执行一次Clone方法重构新table。
本部分对体验比较重要，如果设置不当就会有变形的感觉，很不美观。
【borderCollapse】
上面说到td的border宽度的获取比较麻烦，那到底有多烦呢？
如果只是一般情况的话，通过borderLeftWidth和borderRightWidth获取宽度就可以了。
ps：如果borderStyle是"none"的话，那么border就会没效，所以如果要取border宽度的话最好先判断一下borderStyle是不是"none"。
但table有一个特别的样式borderCollapse，设置table的边框模型。
它有两个值，分别是separate（分开，默认值）和collapse（合并）。
separate就是我们一般看到的效果，这里主要讨论collapse，先看mozilla怎么说的：
In the collapsed border model, adjacent table cells share borders.
意思是在collapse border模型中，相邻的td会共用边框。看下面的例子会更明白：
可以看到使用collapse之后，相邻td的边框都合并成一条而且是以相邻边框中宽度较大的那条为准。
那td跟table之间呢，参考下面的例子：
可见table和td之间也是遵从同样规则。
还有的是当设置了collapse那cellspacing就无效了。顺便说说border-spacing，它其实就是cellspacing在css中的样式形式，只是ie在ie8才开始支持，详细可以看mozilla的说明。
collapse的一个常见应用是做边框表格，例如1px边框的表格：
前者用的collapse，后者是用table背景色模拟，虽然效果都一样，但前者显然较好，才是真正的“边框”。
在使用了collapse之后，要写一个通用的获取边框宽度程序会变得十分麻烦，而且有些情况下甚至没办法判断获取。
详细情况这里就不细说了，有兴趣研究的话可以看看w3c的The collapsing border model，当然要想全部了解的话还要在各个浏览器中研究。
0
投稿猜你喜欢
- 在附加数据库后查看不了数据库关系图，也无法建立数据库关系图 我的解决方法如下： 1、设置兼容级别为90（2005为90）（2000为80）
在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果，或者多重边框的效果。这种渐进增强的方式适用于所有支持CSS2.1伪- 1.JOIN和UNION区别 join 是两张表做交连后里面条件相同的部分记录产生一个记录集， union是产生的两个记录集(字段要一样的)
- 很多人说设计是力求细节的，在网页设计里表达出的细节就是图标。图标在一个设计里带来了额外的注解并且使设计里的对象和元素引起用户的注意。以下介绍
- 以下的文章主要向大家介绍的是实现MySQL远程访问的实际操作流程，以及在实现MySQL远程访问的过程中哪些的相关事项是十分重要的，以下就是文
- 客户需要一个类似 news letter 的功能，当然，内容是可编辑的，而且还要以 HTML 格式呈现给用户。这就需要在发送邮件的时候，指明
- 提到sa弱口令，我们首先就会想到，许多数据库都有1个类似的超级管理员账号，比如：Oracle是"system"和&quo
- 本文中，abigale代表查询字符串，ada代表数据表名，alice代表字段名。技巧一：问题类型：ACCESS数据库字段中含有日文片假名或其
- 问：怎样解决mysql连接过多的错误？答：系统不能连接数据库，关键要看两个数据：1、数据库系统允许的最大可连接数max_connection
- Asp中Server.ScriptTimeOut属性需要注意的一点Server.ScriptTimeout 这个属性给定Asp脚
- 在学习和使用各种数据库的过程中,我们常常会遇到聚族索引、非聚族索引、组合索引的概念,这些索引对我们使用数据库，特别是查询的速度的
- 我们知道，全局临时表的生命周期一直持续到创建会话（不是创建级别）才终止。有时候，你可能想创建一个不属于任何会话的全局临时表。而无论你进行什么
- CSS布局中可以用javascript判断浏览器版本看如下的javascript脚本： if (window.XMLHt
- 一个js用星投票的例子，不是常见的图片版，当然你如果会点js代码的话应该可以改为更加美观的图片投票，原理都一样。本程序只演示了读取星的个数，
- 在制作表单的时候，我们往往用CSS来重新定义表单元素（如输入框、按钮等）的样式，以便看起来更加美观。而表单中的很多不同元素（如输入框、提交按
- 最近在做一个程序正好需要用到此方面，在网上找到过相应的程序，但用起来都非常恶，于是乎只好自己实现一个了。 首先实现两个函数用来操作光标：
- 因为外贸网站,禁止同行抄袭，所以防止中国ip访问访问,访问的时候有密码提示,这样的代码如何写.请给一个提示.或者有好的代码,请分享下。 &n
- 维护是什么，维护就是修改，不断的修改，但是要保证你的html和css有清晰的版本界定，有扩展性，不要因为做的太死而重新去做这个页面。一个赚钱
- 翻译：ShiningRay简介你是否知道JavaScript其实也是一个函数式编程语言呢？本指南将教你如何利用JavaScript的函数式特
- 通常情况下，即使MyISAM表格式非常可靠（SQL语句对表做的所有改变在语句返回之前被写下），如果下列任何事件发生，你依然可以获得损坏的表：
