我有一个标准的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>
我希望有人可以提供帮助,谢谢。
答案 0 :(得分:1)
查看此示例http://jsfiddle.net/8R4x7/,新的课程moved
正在添加带有标题的第一个表格第7行。不知道它是否会破坏其余的布局
JS:
$(".outer-table").find("table:eq(0)").addClass('moved');
的CSS:
.moved {
margin-top: -25px;
}
答案 1 :(得分:1)
负利润是否足够好?的 DEMO 强>
table tr:first-of-type table {
margin:-1.6em 0 0;/* needs to be tuned to numbers of lines + border-spacing */
}
<edit>
好的,只看到已经通过class + j查询</edit>