05月11, 2015

关于table中合并单元格的显示

最近遇到都一个需求是需要显示一个行合并的列表。知识点比较简单,但是在用的时候容易乱,这里记载下。

rowspan, colspan

这两个属性是用在td和tr标签上的。其中rowspan表示合并几行,从表现上来看是,单元格变高了。colspan表示合并几列,从表现上看是变宽了。 使用时:

  1. rowspan=3表示,这个单元格将占3行,其中自己一行,另外还要再占2行。那么在计算这两个被占的行的单元格时,就需要少算1个,因为已经被第一行的占去了一个。
  2. 同理,colspan=2, 表示,这个单元格将占去2列的位置,其中自己一列,还有它旁边的1列。
  3. 需要注意的是,每一行中,原子单元格的个数是一样的,自己这一行中的单元格+被其他行占的单元格=固定每行单元格
  4. 可以动手画草图,有利于我们计算正确的单元格。

示意图

源码在这里

本文链接:https://imjiaolong.cn/post/tableSpan.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。