1

Как сделать, чтобы вместо ячейки была форма input?

table{
    width: 95%;
    border-collapse:collapse;
    text-align:center;
}

table td, th {
    border: 1px solid #000000;
}
table td, th {
    padding: 3px;
    width: 50px;
    height: 35px;
}
<form method="post" id="myform">
<table> 
   <tr>
        <td>Имя</td>
        <td><input type="text" name="first_name" form="myform"></td>
        <td>Фамилия</td>
        <td><input type="text" name="last_name" form="myform"></td>
   </tr>
</table>
</form>

2
  • Уберите у ячейки padding и растяните input на весь размер ячейки.
    – nazarpunk
    26 июл 2021 в 19:02
  • как то так. Лучше не получится? ibb.co/cNQT1Zm
    – Fostich
    26 июл 2021 в 19:56

1 ответ 1

1

Можно через вычисленные размеры и отрицательный маржин (для подстройки под паддинг родительского <td>):

table {
  width: 95%;
  border-collapse: collapse;
  text-align: center;
}

td, th {
  padding: 3px;
  width: 50px;
  height: 35px;
  border: 1px solid #000000;
}

table input {
  min-width: calc(100% - 2px);       /* минус 2 пикселя бордеров */
  height: calc(100% + 6px);
  margin: 0 -3px; padding: 0 0.3em;
  font: inherit;
  border: 0;
  background: transparent;
}

table input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(0,150,255, 0.3);
}
<form method="post" id="myform">
  <table>
    <tr>
      <td>Имя</td>
      <td><input type="text" name="first_name" form="myform"></td>
      <td>Фамилия</td>
      <td><input type="text" name="last_name" form="myform"></td>
    </tr>
  </table>
</form>

1
  • Спасибо, помог))
    – Fostich
    26 июл 2021 в 20:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.