前端样式变换，脑壳痛！

原本是这个样子
图片说明

我想改成这个样子

图片说明

原来的表格导航是在html里面循环出来的
图片说明

原来的表格内容是在 js 里面循环出来的
图片说明

现在我要的效果是每一条数据单独一个框框，而且还有那个导航，如图：
图片说明

我应该怎么办？？？？
在 js 里面拼接字符串也会报错，不可能在html里面完成，因为下面的数据库内容好像传不了。
脑壳痛！！！！！

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
.tab {
    background-color: #ccc;
}
.tab tr {
    display: block;
    margin: 10px 0px;
}
.tab th, .tab td {
    display: block;
    width: 200px;
    color: #fff;
    background-color: #300;
    border: 1px solid #fff;
}
.tab td:before {
    display: inline-block;
    width: 100px;
    content: attr(data-name)":";
}
.tab tr:first-child {
    display: none;
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var th = $(".tab th");
    $(".tab td").attr("data-name",function(){
        return th.eq($(this).index()).text();
    });
});
</script>
</head>
<body>
    <table class="tab">
        <tr>
            <th>项目A</th>
            <th>项目B</th>
            <th>项目C</th>
        </tr>
        <tr>
            <td>12</td>
            <td>555</td>
            <td>434</td>
        </tr>
        <tr>
            <td>454</td>
            <td>5455</td>
            <td>553</td>
        </tr>
    </table>

</body>
</html>