因为规定要用bootstrap的一个框架，所以我选了其中写好的table布局。
问题是这样的，我点击a标签 <a class="gritter-regular" type="button" >
动态添加一个tr标签并将tr内容显示出来，这个tr标签里有一个td标签占整行，
但是不知道为什么显示出来的这个tr标签只能占一个td的大小，达不到占整行的效果。

我的jQuery代码是这样的` $(".gritter-regular").click(function (target) {

    $(this).parent().parent().parent().after(
    "<tr class='info' style='display: block;background-color: #E6EAF0;'>"+
            "<td colspan='9' class='col-lg-12' style='width: 100%;height: 100%;background-color: #E6EAF0;padding-top: 30px;padding-bottom: 20px'>"+
            "<p class=' col-lg-2' style='margin-left: 62px'><img src='../images/aa.jpg' alt='' width='305' height='170'/></p>"+
            "<p class='col-lg-9' style='padding-left:50px '>"+"<p >" +
            "<ul class='col-lg-9'> <li class='col-lg-2 text-left' style='padding-left: 0'>标题：</li>"+
    "<li class='col-lg-3'>分辨率</li> <li class='col-lg-4'>上传日期：</li></ul>" +
    "<span class=' col-lg-8' style='padding-top: 20px;'>"+
            "简介：搜狗输入法Linux版全新发布！新词特色主题图之旅，一起穿越吧！萌萌的颜文字一键下载直接使用！网站地图 - 企业推广 - 拼音on法 - 搜狗浏览器 - 诚聘英才"+
    "</span>"+
    "<p class='col-lg-8' style='padding-top: 32px'>"+
            "<ul class='col-lg-5' style='padding-left: 0;margin: 0;'>"+
            "<li class=' col-lg-2 text-left' style='padding-left: 0'>标签：</li>"+
    "<li class='col-lg-3'>播放数：</li> </ul> <br/>"+
    "<ul class='col-lg-5' style='padding-left: 0;padding-top: 10px;margin: 0;'>"+
            "<li class=' col-lg-2 text-left' style='padding-left: 0'>标签：</li>"+
   " <li class='col-lg-3' >播放数：</li> </ul> </p> </p> </p> </td> </tr>"
    )
})`

效果图是

大神们帮忙看看这个要怎么解决啊，跪谢！