当rowspan遇到Chrome、Safari和Opera，jQuery解决方案

当rowspan遇到Chrome、Safari和Opera

这是我碰到一个问题，也是好多人碰到的问题，所以借用csdn上的一个贴的内容来描述该问题，如下：

 

http://topic.youkuaiyun.com/u/20120517/17/b331bdcc-aedf-4e96-8a5d-0a0668cc1a3d.html 写道

做了一个简单表格，带有rowspan的，在IE、FF显示正常，Chrome左列各行高度不平均，大家知道怎样处理吗？

代码如下：
<table border=1>
<tr>
<td>aa</td>
<td rowspan=4><img src="aa.jpg"></td>
</tr>
<tr><td>bb</td></tr>
<tr><td>cc</td></tr>
<tr><td>dd</td></tr>
</table>

 

显示效果如下：

 

我翻看了一下该贴，最终决定用js来解决（还有一个解决方案是直接设置height属性）。

 

T5500 写道

这个算不上是Chrome的BUG，而是webkit核心的实现方式就是这样，所以在Safari、Opera下也是同样的效果。应该可以用JS来解决。

 

 

借鉴了csdn上代码，先贴上

 

//DEMO
//这里只作了粗略的计算，精确点的话还需要考虑tr、td所使用的样式（边框宽度、padding值）
window.onload = function() {
    if (!window.all) {
        var obj = document.getElementById('demo');
        
        var rowHeight = Math.ceil(parseInt(obj.offsetHeight) / obj.getElementsByTagName('tr').length) + 'px';
        var cells = obj.getElementsByTagName('td');
        for (var i = 0; i < cells.length; i ++) {
            if (cells[i].rowSpan < 2) cells[i].style.height = rowHeight;
        }
    }
}

 

 

思路大体上是：先得到table的总的高度，然后除以行数，就可以得到每行的平均高度，然后对没有设置rowspan的td设置为此平均高度。但实际中需要对高度做些调整，因为td的样式（如margin和padding会对高度产生影响）。

 

我是用jQuery来做的，经过艰苦的努力，终于得到了一个比较满意的解法，如下：

 

$(function(){
    //if (!window.all) {
	if ($.browser.safari || $.browser.opera) {
		//alert("me");	// 确认是哪种浏览器
		// Safari pass
		// Chrome pass
		// Opera pass

		function adjustCellHeight($table, adjustHeight) {
			var tableHeight = $table.height();
			//alert(tableHeight);
			var rowCount = $("tr", $table).length;
			//alert(rowCount);
			if (tableHeight > 0 && rowCount > 0) {
				//alert("xxx");
				//var adjustHeight = 11;	// 对计算出来的平均行高，需要减去一定得像素值(由margin和padding引起)，已达到与IE和FF下同样的效果。
				var cellHeight = (tableHeight - 2 * (adjustHeight || 0)) / rowCount + "px";	// 计算每行的高度
				$("td", $table).each(function(){
					var $this = $(this);
					var rowspan = $this.attr("rowspan");
					if (rowspan < 2) {
						$this.css("height", cellHeight);
					}
				});
				//alert("hello");
				var tableHeightAdjusted = $table.height();
				if (tableHeightAdjusted - tableHeight >= rowCount || tableHeight - tableHeightAdjusted >= rowCount) {
					//var adjustHeightSuggest = adjustHeight + (tableHeightAdjusted - tableHeight) / rowCount;
					//alert(tableHeight + " " + tableHeightAdjusted + " " + adjustHeightSuggest);
					//return adjustHeightSuggest;
					return tableHeightAdjusted - tableHeight;
				}
				//alert("done");
			}
		}

		var $table = $("#bmbasic");
		var adjustHeightSuggest = adjustCellHeight($table);
		//alert(adjustHeightSuggest);
		if (adjustHeightSuggest) {
			adjustCellHeight($table, adjustHeightSuggest);
		}
    } else {
		// IE pass
		// Firefox pass
	}
});

 

 

注意：我的table的id是bmbasic。

 

方法是采用两次调整法：

第一次调整：将每行设置为平均高度，得到最终高度与原高度差值（tableHeightAdjusted - tableHeight），记为adjustHeightSuggest；

第二次调整：将table的当前高度减去两倍的adjustHeightSuggest之后求得平均高度，设置上去就正确了。为什么是两倍，想想就清楚了。