Можно ли использовать HTML-таблицы при вводе формы?

Я пытаюсь понять, как сделать ввод формы небольшим прямоугольником, а не прямоугольником, который растягивается на всю страницу. Надеюсь, этот снимок экрана имеет смысл:

enter image description here

Приведенный ниже код пытается реализовать таблицы и строки таблиц (tr) не работает должным образом, любые советы приветствуются.

<h1>GEB Research</h1>
<hr>
<fieldset>
  <table>

    <tr>
      <h2>Create Open ADR Event</h2>
    </tr>

    <tr>
      <form method="post" action="/trigger">
        <label>VEN ID:</label>
        <input type="text" name="VEN ID" value="" required><br>
        <tr>
          <label>Open ADR Payload Simple Signal:</label>
          <input type="number" name="Payload Signal" value="" required><br>
        </tr>

        <tr>
          <label for="starttime">Choose start date and time for event:</label>
          <input type="datetime-local" id="meeting-time" name="Event-Start" value="2020-07-12T19:30" min="2020-06-07T00:00" max="2024-06-14T00:00" required><br>
        </tr>

        <tr>
          <label>Event Duration in Minutes:</label>
          <input type="number" name="Minutes" value="" min="30" max="720" required><br>
          <small>Minimun requirement of 30 and maximum of 720 Minutes</small>
        </tr>

  </table>
</fieldset>
<input type="submit" value="Submit">
</form>
0
HenryHub 17 Сен 2021 в 17:43

2 ответа

Лучший ответ

Добавьте width: fit-content в fieldset css. Вы также должны исправить свои теги (<form> имеет интересное размещение)

fieldset {
  width: fit-content;
}
<h1>GEB Research</h1>
<hr>
<form method="post" action="/trigger">
  <fieldset>
    <table>

      <tr>
        <h2>Create Open ADR Event</h2>
      </tr>

      <tr>
        <label>VEN ID:</label>
        <input type="text" name="VEN ID" value="" required><br>
        <tr>
          <label>Open ADR Payload Simple Signal:</label>
          <input type="number" name="Payload Signal" value="" required><br>
        </tr>

        <tr>
          <label for="starttime">Choose start date and time for event:</label>
          <input type="datetime-local" id="meeting-time" name="Event-Start" value="2020-07-12T19:30" min="2020-06-07T00:00" max="2024-06-14T00:00" required><br>
        </tr>

        <tr>
          <label>Event Duration in Minutes:</label>
          <input type="number" name="Minutes" value="" min="30" max="720" required><br>
          <small>Minimun requirement of 30 and maximum of 720 Minutes</small>
        </tr>
    </table>
  </fieldset>
  <input type="submit" value="Submit">
</form>
1
depperm 17 Сен 2021 в 14:47

Используйте display : inline-block;

form {
  display : inline-block;
}
<h1>GEB Research</h1>
<hr>
<form method="post" action="/trigger">
  <fieldset>
    <table>

      <tr>
        <h2>Create Open ADR Event</h2>
      </tr>

      <tr>
        <label>VEN ID:</label>
        <input type="text" name="VEN ID" value="" required><br>
        <tr>
          <label>Open ADR Payload Simple Signal:</label>
          <input type="number" name="Payload Signal" value="" required><br>
        </tr>

        <tr>
          <label for="starttime">Choose start date and time for event:</label>
          <input type="datetime-local" id="meeting-time" name="Event-Start" value="2020-07-12T19:30" min="2020-06-07T00:00" max="2024-06-14T00:00" required><br>
        </tr>

        <tr>
          <label>Event Duration in Minutes:</label>
          <input type="number" name="Minutes" value="" min="30" max="720" required><br>
          <small>Minimun requirement of 30 and maximum of 720 Minutes</small>
        </tr>
    </table>
  </fieldset>
  <input type="submit" value="Submit">
</form>
2
Mister Jojo 17 Сен 2021 в 14:55