在表格中心顯示可折疊表格 header

Question

我想在 web 瀏覽器頁面的中心顯示我的表 header。 按下+按鈕時，會顯示數據，但它恰好在表格 header 下方對齊。 我希望可折疊表格准確地顯示在表格 header 的中心。 我嘗試在 CSS 中進行更改，但沒有成功。 任何人都可以幫助我嗎？

 $('.header').click(function() { $(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100); });

 table, tr, td, th { border: 1px solid black; border-collapse: collapse; } tr.header { cursor: pointer; }.header.sign:after { content: "+"; display: inline-block; }.header.expand.sign:after { content: "-"; } table { margin-left: 30px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="0"> <tr class="header expand"> <th>Header Header Header Header <span class="sign"></span></th> </tr> <tr> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> <td>data</td> </tr> </table>

Answer 1

編輯 1
查看新的現場演示（基於評論和問題更改）：
https://stackblitz.com/edit/js-e9cazg

    <table border="0" style="width: 96%; margin: 0 auto;">
        <tr class="header expand">
            <th>My Table Header Centered <span class="sign"></span></th>
        </tr>
        <tr>
            <td>
                <table style="width: 96%; margin: 0 auto;">
                    <tr>
                        <th>Col 1</th>
                        <th>Col 2</th>
                        <th>Col 3</th>
                        <th>Col 4</th>
                        <th>Col 5</th>
                        <th>Col 6</th>
                        <th>Col 7</th>
                        <th>Col 8</th>
                        <th>Col 9</th>
                        <th>Col 10</th>
                        <th>Col 11</th>
                    </tr>
                    <tr>
                        <td>data</td>
                        <td>data</td>
                        <td>data</td>
                        <td>data</td>
                        <td>data</td>
                        <td>data</td>
                        <td>data</td>
                        <td>data</td>
                        <td>data</td>
                        <td>data</td>
                        <td>data</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

---

我更改了 html 表中的樣式，看看這個現場演示： https://stackblitz.com/edit/js-n8yy6k

<table border="0" style="width: 96%; margin: 0 auto;">
    <tr class="header expand">
        <th colspan="11">Header <span class="sign"></span></th>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
</table>

我希望它會有所幫助。