在表格标题的正中央显示可折叠表格

Question

我想在网络浏览器页面的中央显示表格标题。按下+按钮后，将显示数据，但数据恰好在表格标题的下方对齐。我希望可折叠表格准确显示在表格标题的中心。我尝试更改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 colspan="2">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

我更改了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>

我希望它会有所帮助。