0

標準の html テーブルがあり、その行内にネストされたテーブルがあります。これらのネストされたテーブルはプラグインによって生成され、このレイアウトを使用するしかありません。

私が直面している問題は、ネストされたテーブルが親テーブルの 2 列目に収まることです。また、ネストされたテーブルの列の上にヘッダーを配置し、親テーブルの最初の列のヘッダーと垂直方向に揃える必要があります。

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>

誰かが助けてくれることを願っています、ありがとう。

4

2 に答える 2