如何在HTML-CSS中居中带有fieldset的表单/表格，并保持大小一致？

Question

在使用<form>和<table>组合的HTML中。它如下所示：

<form ...>
 <table>
   <tr>
    <td></td>
    <td></td>
   </tr>
   ...
   <tr>
    <td></td>
    <td></td>
   </tr>
 </table>
</form>

要将这个form/table放在页面中间，可以使用以下CSS：

table {
   margin: 0px auto;
}

来源：

• 居中对齐HTML表格

直到一切都没问题。

当向<form>中添加<fieldset>和legend时，实际上是添加到了<table>中。因此，现在的结构如下：

<form ...>
<fieldset>
<legend>一些描述...</legend>
 <table>
   <tr>
    <td></td>
    <td></td>
   </tr>
   ...
   <tr>
    <td></td>
    <td></td>
   </tr>
 </table>
</fieldset>
</form>

这里出现了两种情况：

1. 如何使<fieldset>的边框与表单/表格本身的大小相同？

应用如下：

fieldset {
     display: inline-block;
}

来源：

• 有没有办法使fieldset的宽度只与其中的控件一样宽？

即使它按预期工作，<table>仍然位于左侧。

问题

• 如何将带有fieldset的表单/表格放在中间，同时保持fieldset与表单/表格的大小相同？

Answer 1

这样的东西吗？

form {
    display: table;
    margin: 0 auto;
}
table {
   margin: 0 auto;
}
fieldset {
   display: inline-block;
}

<form>
  <fieldset>
    <legend>一些描述...</legend>
    <table>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table>
  </fieldset>
</form>