Bagaimana untuk memusatkan borang/jadual dengan set medan dalam HTML-CSS dan memastikan saiznya konsisten?

Question

Dalam HTML digubah menggunakan <form>和<table>. Ia kelihatan seperti ini:

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

Untuk meletakkan borang/jadual ini di tengah-tengah halaman, anda boleh menggunakan yang berikut CSS:

table {
   margin: 0px auto;
}

Sumber:

• Jajarkan tengah jadual HTML

Sehingga semuanya okay.

hendaklah ke arah <form>中添加<fieldset>和legend时，实际上是添加到了<table>. Oleh itu, struktur semasa adalah seperti berikut:

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

Dua situasi berlaku di sini:

1. Bagaimana untuk membuat sempadan <fieldset> sama saiz dengan bentuk/meja itu sendiri?

Permohonan adalah seperti berikut:

fieldset {
     display: inline-block;
}

Sumber:

• Adakah terdapat cara untuk menjadikan set medan hanya seluas kawalan di dalamnya?

Walaupun ia berfungsi seperti yang diharapkan, <table>masih di sebelah kiri.

Soalan

• Bagaimana untuk meletakkan borang/jadual dengan set medan di tengah sambil mengekalkan saiz set medan sama dengan borang/jadual?

Answer 1

Perkara sedemikian?

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>