@DobriyParen

Скажите пожалуйста как сделать размер таблице как на фото?

646b6487ad2a4526716870.pngскажите пожалуйста как сделать размер таблице как на фото
<!DOCTYPE html>
<html>
<head>
  <title>Форма регистрации на сайте знакомств</title>
  <style>
    textarea { 
      margin-top: 10px;
    }

    table {
      border-collapse: collapse;
      width: 100%;
    }

    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: lightgray;
    }

    .custom-table td:first-child {
      width: 30%; /* Измените это значение, чтобы задать нужную ширину первого столбца */
    }

    .custom-table td:last-child {
      width: 70%; /* Измените это значение, чтобы задать нужную ширину второго столбца */
    }
  </style>
</head>
<body>
  <h2>Форма регистрации на сайте знакомств</h2>
  <form action="обработчик.php" method="POST">
    <table class="custom-table">
      <tr>
      </tr>
      <tr>
        <td><label for="nickname">Ник:</label></td>
        <td><input type="text" id="nickname" name="nickname" required></td>
      </tr>
      <tr>
        <td><label for="fullname">Ваше имя:</label></td>
        <td><input type="text" id="fullname" name="fullname" required></td>
      </tr>
      <tr>
        <td><label for="password">Пароль:</label></td>
        <td><input type="password" id="password" name="password" required></td>
      </tr>
      <tr>
        <td><label for="confirm_password">Повторите пароль:</label></td>
        <td><input type="password" id="confirm_password" name="confirm_password" required></td>
      </tr>
      <tr>
        <td><label for="email">Email:</label></td>
        <td><input type="email" id="email" name="email" required></td>
      </tr>
      <tr>
        <td><label for="photo">Фото:</label></td>
        <td><input type="file" id="photo" name="photo"></td>
      </tr>
      <tr>
        <td colspan="2">Ваши интересы</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" id="book1" name="book1" value="book1">
          <label for="book1">Книги</label><br>
          <input type="checkbox" id="book2" name="book2" value="book2">
          <label for="book2">Музыка</label><br>
          <input type="checkbox" id="book3" name="book3" value="book3">
          <label for="book3">Кино</label><br>
        </td>
        <td>
          <input type="checkbox" id="food" name="food" value="food">
          <label for="food">Кухня</label><br>
          <input type="checkbox" id="fashion" name="fashion" value="fashion">
          <label for="fashion">Мода</label><br>
          <input type="checkbox" id="dance" name="dance" value="dance">
          <label for="dance">Танцы</label><br>
        </td>
      </tr>
      <tr>
        <td><label>Пол:</label></td>
        <td>
          <input type="radio" id="male" name="gender" value="male">
          <label for="male">Мужской</label>
          <input type="radio" id="female" name="gender" value="female">
          <label for="female">Женский</label>
        </td>
      </tr>
    </table>
    <textarea id="about" name="about" rows="4" cols="50"></textarea>
    <br>
    <input type="submit" value="Отправить данные">
    <input type="reset" value="Сбросить данные">
  </form>
</body>
</html>
  • Вопрос задан
  • 51 просмотр
Решения вопроса 1
Stalker_RED
@Stalker_RED
table {
  max-width: 40px;
  /* ну не 40, конечно, а подберите какая ширина вам нравится. 
   можно там в процентах писать, или em, rem, vw и прочие забавные единицы измерения */
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Mi11er
@Mi11er
A human...
Сделайте для формы контейнер и ограничьте его шириной.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы