0

In HTML for a <form> used together with a <table>. It such as:

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

To put this form/table in the middle of the page is used CSS as follows:

table {
   margin: 0px auto;
}

Credits from:

Until all is ok.

The situation is when is added <fieldset> and legend to the <form>, well really to the <table>. Therefore the structure is now as follows

<form ...>
<fieldset>
<legend>Some Description ...</legend>
 <table>
   <tr>
    <td></td>
    <td></td>
   </tr>
   ...
   <tr>
    <td></td>
    <td></td>
   </tr>
 </table>
</fieldset>
</form>

Here arises two situations:

  1. How to put the <fieldset>'s border as the same size as the form/table itself?

Here as applied

fieldset {
     display: inline-block;
}

Credits from:

Even when it works as expected, the <table> returns to the left.

Question

  • How to put a form/table with fieldset to the center but keeping the fieldset as the same size as the form/table?
Manuel Jordan
  • 15,253
  • 21
  • 95
  • 158

1 Answers1

1

Something like this?

form {
    display: table;
    margin: 0 auto;
}
table {
   margin: 0 auto;
}
fieldset {
   display: inline-block;
}
<form>
  <fieldset>
    <legend>Some Description ...</legend>
    <table>
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table>
  </fieldset>
</form>
luenib
  • 360
  • 3
  • 15