Как настроить ширину ячеек тега table в html

Question

Делаю таблицу в которую пользователь будет вводить данные. Для этого в тег td вкладываю тег input. Нужно чтобы ширина ячеек была фиксированной, а высота подстраивалась под вводимый текст. Как это сделать при помощи html5 и css3 (проект маленький смысла в препроцессоре и библиотеках нет)?

Answer 1

стили и использование:

table {
  border-collapse: collapse;
  width: 300px;
  /* Задайте фиксированную ширину таблицы */
}

td {
  border: 1px solid #ccc;
  padding: 8px;
  word-wrap: break-word;
  /* Перенос слов */
  max-width: 100%;
  /* Максимальная ширина ячейки */
}

input {
  width: 100%;
  /* Занимает 100% ширины ячейки */
  box-sizing: border-box;
  /* Учитывает padding и border в расчете ширины */
}

<td><input type="text"></td>

Answer 2

А что если заменить <input> на <textarea></textarea>, задать таблице ширину и table-layout: fixed; задать необходимую ширину ячеек. И получить вот это:

table {
  table-layout: fixed;
  width: 450px;
  height: auto;
  border-spacing: 5px;
}

td {
  width: 225px;
  height: auto;
  overflow: hidden;
}

td textarea {
  width: 220px;
  height: auto;
  outline: none;
}

<table border="1">
  <tr>
    <td>Ваше имя</td>
    <td><textarea></textarea></td>
  </tr>
  <tr>
    <td>Ваша фамилия</td>
    <td><textarea></textarea></td>
  </tr>
  <tr>
    <td>Ваш город</td>
    <td><textarea></textarea></td>
  </tr>
</table>

Или вот это:

table {
  table-layout: fixed;
  width: 450px;
  height: auto;
  border-spacing: 5px;
}

td {
  width: 225px;
  height: auto;
  overflow: hidden;
}

td textarea {
  display: block;
  width: 220px;
  height: auto;
  outline: none;
}

<table border="1">
  <tr>
    <td>Ваше имя</td>
    <td><textarea></textarea></td>
  </tr>
  <tr>
    <td>Ваша фамилия</td>
    <td><textarea></textarea></td>
  </tr>
  <tr>
    <td>Ваш город</td>
    <td><textarea></textarea></td>
  </tr>
</table>

Answer 3

С саморегулирующейся высотой не помогу, но про ширину есть два слова в учебнике, может станет понятнее.

ШИРИНА СТОЛБЦОВ И ВЫСОТА СТРОК

Шириной столбцов можно управлять, определяя размер ячейки каждого столбца. Эта ширина одной ячейки становится шириной, которой будут соответствовать все остальные ячейки столбца.

Высоту строк можно задавать таким же образом, как задается ширина столбцов: определяя высоту одной ячейки в строке, остальные ячейки изменяют свою высоту в соответствии с этой высотой.

БЛОГ НА HUSL

Как настроить ширину ячеек тега table в html

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