当rowspan遇到Chrome、Safari和Opera
这是我碰到一个问题,也是好多人碰到的问题,所以借用csdn上的一个贴的内容来描述该问题,如下:
http://topic.csdn.net/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之后求得平均高度,设置上去就正确了。为什么是两倍,想想就清楚了。
分享到:
相关推荐
jquery table rowspan 表格单元格合并,设置相同属性表格合并
日常开发中,经常遇到表格里需要自动合并单元格,考虑到写服务器控件比较消耗性能,因些还是把这种工作交给客户端Javascript去做吧,基于习惯用jquery框架,所以封装了一个Jquery插件。
jquery.table.rowspan.js
通过jquery还原含有rowspan、colspan的table的实现方法,学习jquery的朋友可以参考下
NULL 博文链接:https://romyli.iteye.com/blog/774163
NULL 博文链接:https://relive123-yahoo-com-cn.iteye.com/blog/1168865
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。主要的特点包括:多列排序支持文本、URL地址、数值、IP...
对table表格进行操作,两行根据点击添加 删除按钮 进行单元格的删除 添加 合并单元格。
extjs3合并表头 rowspan
NULL 博文链接:https://tipx.iteye.com/blog/718279
layui中, 合并数据表格行,layuiRowspan方法中参数一位需要合并的数据field。
我们就中和下利用JQuery来和他一个table里面相同内容的单元格,这里代码跟大家分享下,希望对大家有用,如下: 头部JQuery代码 代码如下: [removed] jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小...
现实中会遇到很多需求,合并列,例如要显示一个名学生的各门课程成绩。 html实现 使用html实现是比较简单的,利用table标签的rowspan属性即可,代码如下: 姓名 课程数 课程名称 成绩 <td ...
在此处查看LIVE示例 对于仅启用表格主体独立滚动的解决方案,不是。 您可能想看看可Chrome化的或其他。 老实说,我们也尝试过这些方法,但是它们不能很好地处理带有colspans和rowpans的大表。与多个标题行和colspan...
动态的给某个表对象添加列属性和行属性,采用obj.setAttribute("rowspan",n)(即rowspan=n)不能生效。
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。 主要的特点包括: •多列排序 •支持文本、URL地址、...
js代码 [removed] ... function choiceTitle(obj){ ... //获取 rowspan 的值 ... var foor = $(obj).attr("rowspan");...这是一款功能强大支持单选多选全选的jQuery房屋楼层选择代码,具体看演示效果就明白了。
如下所示: ////在table的第二行的位置添加一行: var tbl_elm = $("#dgList"); $('<tr><td colspan=\>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1)) ...还可以写成:tds[6].attr("rowSpan", 2);
好久没有发相关浏览器的坑了。今天同事cy发现,在firefox里rowspan不生效...