由于你没有回应评论或进一步发展你的问题，要求（这是完全相反的，你被要求做什么时问）。我试着猜测你的最终目标，并提出以下内容。

• 再次！将所有表格单元格的th标记更改为td，除了for标题 *

function expandTable() {
  document.getElementById("expand").classList.toggle('hidden');
}

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

.hidden {
  display: none;
}

<div id="expenses-table">
  <table class="table mb-4">
  <thead>
    <tr>
      <th>Date</th>
      <th>Supplier</th>
      <th>Amount</th>
      <th>Reason</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
      <th><input type="text"></th>
    </tr>
  </tbody>
  <tbody id="expand" class="hidden">
  <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>
</tbody>
</table>
</div>

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

如果需要将一个表 Package 在另一个表中，则需要执行以下操作（将a嵌套< table >在标记中< table >）：

<table>
  <tr>
    <td>
        <table>
           <tr>
              <td></td>
           </tr>
        </table>
    </td>
  </tr>
<table>

另外，CSS不能很好的控制表格单元格，当内容很长的时候，表格会自行扩展，像这样：

因此，< div >< table >如果您确实需要控制样式，请使用而不是。