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


html 新增一行 demo html增加空行_table



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


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

<table  type="table" initdata="TrainingInfoBeans" id="trainingInfoTable" width="330" height="120" border="0" align="center" cellpadding="0" cellspacing="0"> 
 
            <thead style="display: none;" > 
 
        <th width="70%">培训标题</th> 
 
        <th width="30%">发布时间</th> 
 
        </thead> 
 
        <tr style="display: none;"> 
 
        <td style="text-align:left;float: left;" width="70%" ><a href="javascript:showTrainingInfoBeanDetailPage('{trainingInfoId}')" class="cuttitle">{title}</a></td> 
 
        <td style="text-align:left;float: left;" width="30%">【{createDate}】</td> 
 
        </tr> 
 
  </table>



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



html 新增一行 demo html增加空行_table_02



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


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


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


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


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


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


简单考虑一下


第一种方案存在的问题：


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


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


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


方案2：


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


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


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


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 = " "; 

 
}


效果如下：



html 新增一行 demo html增加空行_jsp_03



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