我有一个标准的HTML表和它的行内有嵌套的表格。 这些嵌套表由一个插件生成的,我没有选择,只能使用此布局。
我现在面临的问题是,嵌套表适合父表的第二列中。 我需要把标题嵌套表格列上和垂直方向上与父表的第一列的标题对齐。
我想实现这个使用jQuery。 我做了我目前的布局是如何模样,我要对齐被赋予红色的背景色列标题的例子。 这里是例子: http://jsfiddle.net/Qh66H/
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<body>
<table class="outer-table">
<thead>
<th>Heading 1</th>
</thead>
<tbody>
<tr>
<td>
Content 1
</td>
<td>
<table>
<thead>
<th>Heading 1.1</th>
<th>Heading 1.2</th>
</thead>
<tbody>
<tr>
<td>
Content 1.1
</td>
<td>
Content 1.2
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
Content 2
</td>
<td>
<table>
<thead>
<th>Heading 2.1</th>
<th>Heading 2.2</th>
</thead>
<tbody>
<tr>
<td>
Content 2.1
</td>
<td>
Content 2.2
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
<script>
function styleHeaders(){
//Hide all except the first nested headers.
$(".outer-table table").find("thead").not(":eq(0)").css('display', 'none');
//Move first nested table header up.
$(".outer-table table").find("thead:eq(0)").css('background-color', 'red');
}
styleHeaders();
</script>
</html>
我希望有人能帮助,谢谢。