扩展表格样式异常：二级表格与主表格显示不一致

我有一个显示符合预期的主表格，在其下方添加了一个Expand按钮，用于展开显示二级表格。但该二级表格的显示效果与主表格不符，表现为向左对齐且单元格间无预期间距，现寻求问题原因。

主表格（显示正常） #

<div id="expenses-table">
  <table class="table">
    <tr>
      <th>Date</th>
      <th>Supplier</th>
      <th>Amount</th>
      <th>Reason</th>
    </tr>
    <tr>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
    </tr>
  </table>
  
  <br>
  <br>

存在显示问题的二级表格相关代码 #

.table,
tr {
  border: 1px solid black;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
}

<table id="expand" style="display:none" class="table">
  <tr>
    <th>Date</th>
    <th>Supplier</th>
    <th>Amount</th>
    <th>Reason</th>
  </tr>
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
  <tr>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
    <th><input type="text"></th>
  </tr>
</table>
</table>
</div>

<button id="expand-btn" class="button" onClick="expandTable()">Expand</button>

• HTML结构错误：二级表格末尾多了一个</table>闭合标签，导致DOM结构层级混乱，浏览器无法正确解析表格的完整结构，进而破坏了样式的正常应用。
• CSS样式不完整：当前CSS仅给.table和tr设置了基础样式，但缺少表格渲染的核心属性：
  • 未设置border-collapse或border-spacing来控制单元格边框和间距；
  • 未给th标签添加内边距（padding），导致单元格内容紧贴边框，视觉上无间距；
• 样式继承异常：主表格可能继承了页面中其他未展示的全局样式（如浏览器默认表格样式或其他CSS规则），而二级表格因结构错误无法正常继承这些样式，导致显示差异。

1. 修正HTML结构错误 #

移除二级表格之后多余的</table>标签，确保DOM结构正确：

2. 完善CSS样式 #

补充表格必要的渲染属性，保证主、二级表格样式统一：

修改后的完整代码 #

<div id="expenses-table">
  <table class="table">
    <tr>
      <th>Date</th>
      <th>Supplier</th>
      <th>Amount</th>
      <th>Reason</th>
    </tr>
    <tr>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
    </tr>
  </table>
  
  <br>
  <br>

  <table id="expand" style="display:none" class="table">
    <tr>
      <th>Date</th>
      <th>Supplier</th>
      <th>Amount</th>
      <th>Reason</th>
    </tr>
    <tr>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
    </tr>
    <tr>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
    </tr>
    <tr>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
    </tr>
    <tr>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
    </tr>
    <tr>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
    </tr>
  </table>
</div>

<button id="expand-btn" class="button" onClick="expandTable()">Expand</button>

.table {
  border: 1px solid black;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  border-collapse: separate; /* 若需要边框合并可改为collapse */
  border-spacing: 0;
}

.table th {
  border: 1px solid black;
  padding: 8px 12px; /* 增加内边距，让内容有呼吸空间 */
  text-align: left; /* 统一单元格对齐方式 */
}

// 补充展开/收起逻辑（若之前未定义）
function expandTable() {
  const table = document.getElementById('expand');
  table.style.display = table.style.display === 'none' ? 'table' : 'none';
}

内容的提问来源于stack exchange，提问作者Tom O'Hanlon