对齐嵌套表标题使用jQuery(Align Nested Table Headers Using j

2019-10-29 15:50发布

我有一个标准的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>

我希望有人能帮助,谢谢。

Answer 1:

将阴性切缘围绕一个足够好的工作? DEMO

table tr:first-of-type table {
    margin:-1.6em 0 0;/* needs to be tuned to numbers of lines + border-spacing */
}

<edit>没关系,通过类+ J查询已经给了刚才看到的答案</edit>



Answer 2:

看看这个例子http://jsfiddle.net/8R4x7/ ,新一类moved被添加负利润率与标题的第一个表,7行不知道,如果它打破了你的布局的其余部分

JS:

$(".outer-table").find("table:eq(0)").addClass('moved');

CSS:

.moved {
    margin-top: -25px;
}


文章来源: Align Nested Table Headers Using jQuery