我正在创建一个HTML标记，我有两个表，一个只是div上的表头位置，另一个下面的div包含另一个表，应该显示该标题的详细信息。我的意思是标题和细节在两个表中分开，以满足业务需求。
问题是我无法对列进行正确的对齐，我的意思是表的标题未与详细信息表的列对齐，
我想知道一个简单的想法来实现这个，因为我试图在运行时获取详细信息列的宽度并将其设置在表列标题上，但这不起作用，
下面我列出了HTML标记。你将在一个名为header2的div上查找表头，详细信息在一个名为content的div上。
任何帮助，请
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style>
body {
overflow-y: hidden;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding-left: 0.5em;
}
.handle {
background-repeat: no-repeat;
background-position: center bottom;
display: block;
float: left;
}
.collapsed {
/*background: transparent url(/images/plus-black.png);*/
background-repeat: no-repeat;
background-position: center bottom;
cursor: pointer;
}
.expanded {
/*background: transparent url(/images/minus-black.png);*/
background-repeat: no-repeat;
background-position: center bottom;
cursor: pointer;
}
#header {
position: fixed;
width:100%
}
#header2
{
position: absolute;
width: 100%;
margin-top:13%;
/*/*padding-left:1.5%*/*/
}
#content {
margin-top: 19%;
position:absolute;
width: 100%;
overflow-y:auto;
height:30%;
}
input[type=checkbox] {
float:left;
}
</style>
<link rel="stylesheet" href="treeview.min.css" />
<script src="treeview.min.js"></script>
<script type="text/javascript">
function showDiv(x) {
document.getElementById('div'+x).style.display = "block";
document.getElementById(x).style.visibility = "hidden";
document.getElementById('td'+x).style.backgroundColor = "cadetblue";
togglecheckboxes('cbgroup5');
var width = document.getElementById('div' + x).offsetWidth;
ExpandColumnWidth(width, 5);
}
function HideDialog(x) {
document.getElementById('div' + x).style.display = "none";
document.getElementById(x).style.visibility = "visible";
document.getElementById('td' + x).style.backgroundColor = "transparent";
document.getElementById('tdd' + x).style.backgroundColor = "transparent";
document.getElementById('tddd' + x).style.backgroundColor = "transparent";
}
function ExpandAll()
{
jQuery("#tree ul").show();
debugger;
var x = document.getElementById("tst1").style.width;
}
function CollapseAll()
{
jQuery("#tree ul").hide();
}
function togglecheckboxes(group)
{
var cbarray = document.getElementsByClassName(group);
for (var i = 0; i < cbarray.length; i++) {
var cb = document.getElementById(cbarray[i].id);
cb.style.visibility = 'visible';
}
}
function ExpandColumnWidth(width,group)
{
var tbarray = document.getElementsByClassName("td"+group);
for (var i = 0; i < tbarray.length; i++) {
var tb = document.getElementById(tbarray[i].id);
tb.style.width = width+'px';
}
}
//$(document).ready(function () { var w = document.getElementById() });
$(document).ready(function() {
jQuery("#tree ul").show();
jQuery("#tree li").each(function() {
var handleSpan = jQuery("<span></span>");
handleSpan.addClass("handle");
handleSpan.prependTo(this);
if(jQuery(this).has("ul").size() > 0) {
handleSpan.addClass("collapsed");
handleSpan.click(function() {
var clicked = jQuery(this);
clicked.toggleClass("collapsed expanded");
clicked.siblings("ul").toggle();
});
}
});
})
//})
</script>
<div id="header" style="overflow:auto" >
<h1></h1>
<div class="class=" col-lg-7">
<p class="bs-component">
<a href="#" class="btn btn-primary" onclick="ExpandAll();">Expand All</a>
<a href="#" class="btn btn-primary">Show hide regions</a>
</p>
<p class="bs-component">
<a href="#" class="btn btn-primary" onclick="CollapseAll();">Collapse All</a>
<a href="#" class="btn btn-primary">Show hide countries</a>
</p>
</div>
</div>
<div id="header2">
<table class="table table-striped table-hover">
<thead>
<tr>
<td id="td1">xxxxx</td>
<td id="td2">xxxxx</td>
<td id="td3">Comment</td>
<td id="td4">Region</td>
<td id="td5" class="td5">
<a id="5" href="#" onclick="showDiv('5')">edit</a>
<span> country </span>
</td>
<td>xxxxx</td>
</tr>
</thead>
</table>
</div>
<div id="content">
<ul id="tree">
<li>
Section A
<ul>
<li>
Line Item
<ul>
<li>
<table class="table table-striped table-hover">
<thead >
<tr>
<td id="vth1">xxxxx</td>
<td id="vth2">xxxxx</td>
<td id="vth3">Comment</td>
<td id="vth4">Region</td>
<td id="vth5" class="td5">
<a id="5" href="#" onclick="showDiv('5')">edit</a>
<span> country </span>
</td>
<td>xxxxx</td>
</tr>
</thead>
<tr>
<td id="tst1" >xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td id="tdd5_1" class="td5">
<input type="checkbox" id="cb5_1" class="cbgroup5" name="cbg5[]" style="visibility:hidden"/>
<span>xxxxx</span>
</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxndkvfkdkvkfvnk</td>
<td>xxxxx</td>
<td id="tdd5_2" class="td5" >
<input type="checkbox" id="cb5_2" class="cbgroup5" name="cbg5[]" style="visibility:hidden"/>
xxxxx
</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxxfgdfgdfgfd</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td id="tdd5_3" class="td5">
<input type="checkbox" id="cb5_3" class="cbgroup5" name="cbg5[]" style="visibility:hidden"/>
xxxxx
</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxxfgfdgdf</td>
<td>xxxxx</td>
<td id="tdd5_4" class="td5">
<input type="checkbox" id="cb5_4" class="cbgroup5" name="cbg5[]" style="visibility:hidden"/>
xxxxx
</td>
<td>xxxxx</td>
</tr>
</table>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>