Изменение высоты ячейки таблицы в таблице HTML - PullRequest
Новая
       54

Изменение высоты ячейки таблицы в таблице HTML

0 голосов
/ 25 декабря 2018

У меня есть HTML-таблица с тремя столбцами. Во втором столбце я добавил простой стиль, как показано ниже. 

table {
  border: 1px solid black;
}

.requiredBar {
  background-color: #c00;
}

.requiredCol {
  width: 1px;
  max-width: 1px;
}
<table>
  <tr>
    <td>Name</td>
    <td class="requiredCol requiredBar">&nbsp;</td>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <td>Password</td>
    <td class="requiredCol requiredBar">&nbsp;</td>
    <td><input type="text" /></td>
  </tr>

</table>

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

Можно ли изменить высоту какой-либо ячейки (в данном случае красной полоски) в HTML-таблице той же строки?

Ответы [ 2 ]

0 голосов
/ 25 декабря 2018

Вы не можете изменить высоту одной ячейки, не изменив высоту строки в таблице (на самом деле это стандарт), и это заставит таблицу изменить некоторые другие ячейки в таблице.

Если вы хотите упорядочить некоторые теги (как ввод и метка в этом случае) лучше использовать CSS Grid Layout вместо таблицы.

Если вы настаиваете на использовании таблицы, вы можете установить позицию элемента, которая останется в ячейке с помощью flexbox, вместо точного измененияклетка.Основная идея гибкого макета состоит в том, чтобы дать контейнеру возможность изменять ширину / высоту своих элементов (и порядок), чтобы наилучшим образом заполнить доступное пространство.

0 голосов
/ 25 декабря 2018

Вы можете добавить div внутри вашего requiredCol и установить его высоту 

table {
  border: 1px solid black;
}

.requiredBar {
  background-color: #c00;
  height: 10px;
  width: 2px;
  display: block;
}

.requiredCol {
  width: 2px;
}
<table>
  <tr>
    <td>Name</td>
    <td class="requiredCol">
      <div class="requiredBar"></div>
    </td>
    <td><input type="text" /></td>
  </tr>
  <tr>
    <td>Password</td>
    <td class="requiredCol">
      <div class="requiredBar"></div>
    </td>
    <td><input type="text" /></td>
  </tr>
</table>
...