要想達到以下圖片中的佈局：
下面是相應的html代碼，當然裏面的Jquery和boostrap是我自己引入的。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>jsTable</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="bootstrap.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
var json = {"0": {"rrvalue": {"CC": 0.8652407470299768,"CT": 1.1161605636753882,"TT": 1.4398471271298607},"rsid": "rs505802","sex": 0},"1": {"rrvalue": {"CC": 0.8655216050171408,"CT": 1.116522870472112,"TT": 1.4403145029090243},"rsid": "rs505802","sex": 1}};
console.log(json);
//console.log(json["0"]["rrvalue"]["CC"]);
//json 數據的長度
var count = Object.keys(json).length;
$(function(){
var dom_tbody = $('<tbody></tbody>');
var base_dom_tr1 = $('<tr></tr>');
var base_dom_th1 = $('<th></th><th style=\'text-align: center;\' colspan=\'3\'>rrvalue</th><th></th><th></th>');
base_dom_tr1.append(base_dom_th1);
dom_tbody.append(base_dom_tr1);
var base_dom_tr2 = $('<tr></tr>');
var base_dom_th2 = $('<th>id</th><th>CC</th><th>CT</th><th>TT</th><th>rsid</th><th>sex</th>');
base_dom_tr2.append(base_dom_th2);
dom_tbody.append(base_dom_tr2);
for(var i=0;i<count;i++){
var base_dom_tr3 = $('<tr></tr>');
var base_dom_th3 = $('<th>'+i+'</th><th>'+json[i]["rrvalue"]["CC"]+'</th><th>'+json[i]["rrvalue"]["CT"]+'</th><th>'+json[i]["rrvalue"]["TT"]+'</th><th>'+json[i]["rsid"]+'</th><th>'+json[i]["sex"]+'</th>');
base_dom_tr3.append(base_dom_th3);
dom_tbody.append(base_dom_tr3);
}
var dom_table = $('<table class=\'table table-bordered\'></table>').append(dom_tbody);
$("#createTable").append(dom_table);
});
</script>
</head>
<body>
<div id="createTable">
<!--
<table class="table table-bordered">
<tr>
<th></th>
<th style="text-align: center;" colspan="3">rrvalue</th>
<th></th>
<th></th>
</tr>
<tr>
<th>id</th>
<th>CC</th>
<th>CT</th>
<th>TT</th>
<th>rsid</th>
<th>sex</th>
</tr>
<tr>
<th>0</th>
<th>0.8652407470299768</th>
<th>1.1161605636753882</th>
<th>1.4398471271298607</th>
<th>rs505802</th>
<th>0</th>
</tr>
</table>
-->
</div>
</body>
</html>