Html table添加空行

做某项目的门户网站，要在首页显示几个模块的信息，每个模块都是使用table来加载数据。初始化加载数据的时候因为我们设定的条数是5条，但是有的模块数据不够，就出现了页面不美观的情况。如下图:

页面效果不是很理想，5行数据与4行数据的行宽是不一样的。这样页面美观效果就差了，有木有啊！！

jsp页面加载数据部分代码（其他模块类似）

 
         
     
     
     
     
     
     
     
 

培训标题	发布时间
{title}	【{createDate}】

设置了一些行高line-height之类的样式也没有效果，后来请教彪哥，彪哥说应该是table的高度引起的，让我把table的高度（height）去掉以后，果然两个模块的行高一样了，但是随之又出现一个问题

悲催的发现它丫的短了一截，这个难看啊！！

于是彪哥总结：这是因为table的高度引起的，设置了高度也不行的话只能补（ ）空格了！！

又经过一段时间的百度（谷歌又上不去了）问题没有解决。决定按照彪哥指定的方案行事!

这个方案简单的思考了一下两种方法：

1、在后台加载数据时，判断数据条数是否够5条，不够的动态添加一下数据。

2、直接在页面获得数据的长度，在页面添加。

简单考虑一下

第一种方案存在的问题：

1。动态添加的空白数据在由Entity转换为Bean的时候回报错（类型转换错误）；

2当页面显示的数据的条数修改以后需要修改java代码改正加载条数，即使在配置文件修改也需要修改配置文件；

总体修改过程过程要比第二种要复杂一些，更重要的是第一个问题。所以我采用第二种方案！将来数据有问题以后也可以修改，修改后替换jsp页面就可以。若大家有好的建议也可以提出来。

方案2：

首先获得对应的table，然后得到加载数据的条数，如果不足就用空格来填充。

注意点：table中标题和设置了style=“display”的各占一行，所以加上要显示的5条数据一共是7行！

//首先代码如下（技术部分）

var table=document.getElementById(" trainingInfoTable");

var index=table.rows.length;

for(var i= index; i<7; i++){

var row = table.insertRow(i);

var col = row.insertCell(0);

col.innerHTML = " ";

col = row.insertCell(1);

col.innerHTML = " ";

}

效果如下：

问题解决，感谢彪哥对我的支持！