Align Nested Table Headers Using jQuery

Question

I have a standard html table and inside its rows there are nested tables. These nested tables are generated by a plugin and I have no choice but to use this layout.

The problem I am facing is that the nested tables fit inside the second column of the parent table. And I need to put headers above the nested table columns and vertically align them with the header for the first column of parent table.

I would like to achieve this using jQuery. I have made an example of how my current layout looks like, the column headers that I wish to align have been given a background color of red. Here is the example: 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>

I hope someone can help, thank you.

G-Cyrillus · Accepted Answer · 2014-06-17 20:14:17Z

1

Would a negative margin be a good enough work around ? DEMO

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

<edit> okay, just seeing answers already given via class + j query </edit>

answered Jun 17, 2014 at 20:14

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Radionov · Accepted Answer · 2014-06-17 20:10:53Z

1

Check out this example http://jsfiddle.net/8R4x7/, new class moved with negative margin is being added a very first table with headings , line 7. Don't know if it breaks the rest of your layout

js:

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

css:

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

answered Jun 17, 2014 at 20:10

Michael Radionov

13.3k2 gold badges59 silver badges75 bronze badges

Collectives™ on Stack Overflow

Align Nested Table Headers Using jQuery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related