форма внутри таблицы form/table/html/css

Question

Как сделать, чтобы вместо ячейки была форма 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>

Answer 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>

БЛОГ НА HUSL

форма внутри таблицы form/table/html/css

Ответы (1 шт):