Comment centrer un formulaire/tableau avec des jeux de champs en HTML-CSS et garder la taille cohérente ?

Question

En HTML composé en utilisant <form>和<table>. Cela ressemble à ceci :

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

Pour placer ce formulaire/tableau au milieu de la page, vous pouvez utiliser ce qui suit CSS :

table {
   margin: 0px auto;
}

Source :

• Centrer le tableau HTML d'alignement

Jusqu'à ce que tout aille bien.

devrait être en direction de <form>中添加<fieldset>和legend时，实际上是添加到了<table>. La structure actuelle est donc la suivante :

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

Deux situations se produisent ici :

1. Comment faire en sorte que la bordure de <fieldset> ait la même taille que le formulaire/le tableau lui-même ?

L'application est la suivante :

fieldset {
     display: inline-block;
}

Source :

• Existe-t-il un moyen de rendre l'ensemble de champs aussi large que les contrôles qu'il contient ?

Même si cela fonctionne comme prévu, <table> est toujours du côté gauche.

Question

• Comment mettre un formulaire/table avec un jeu de champs au milieu tout en gardant le jeu de champs de la même taille que le formulaire/table ?

Answer 1

Une telle chose ?

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>