Свернуть высоту строки таблицы в чистом CSS (без влияния на ширину таблицы) - PullRequest
Новая
       12

Свернуть высоту строки таблицы в чистом CSS (без влияния на ширину таблицы)

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

У меня есть следующий фрагмент HTML с table для выровненной формы: 

<div id="one">
  <p>
    <label for="a">a</label> <input type="text" id="a">
  </p>
  <p class="h">
    <label for="b">bbbbbb</label> <input type="text" id="b">
  </p>
</div>

со следующим CSS: 

#one {
  display: table;
  width: auto;
}

p {
  display: table-row;
}

p label, p input {
  display: table-cell;
}

#one является чем-то вродеавтоматически вычисляемая ширина, а label s и input s имеют неизвестную ширину.Мне нужна функциональность выровненной формы, но такая, что добавление класса h к их строке удаляет затем, освобождая пространство для других элементов по вертикали, но не изменяя ширину #one, поскольку предполагается, что она находится рядом с другими элементами савтоматически вычисляемая ширина.

Какое определение .h в CSS3 даст мне высоту моей "строки таблицы" (p), равную 0, или иным образом визуально удалит ее без изменения ширины родительского элемента?Я могу изменить HTML, если необходимо, но я хочу найти решение, которое не использует JS для этого.

visibility: hidden не удаляет его по вертикали, height: 0 не работает (вероятно, потому что это table-row), и display: none не работает, потому что он меняет эффективную ширину на 0. И я хочу, чтобы мои #one оставались на той же ширине.Использование display: block !important в сочетании с height: 0 частично работает, но оставляет странное вертикальное пространство (а block не должно быть потомком table).

То, что я ищу, похожена этот вопрос SO , но я ищу чистое решение CSS и без фиксирования ширины таблицы.

Вы можете поиграть с ним здесь: JSFiddle .

1 Ответ

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

Хорошо, это может работать как ваше решение.Обратите внимание, что он не должен быть гибким - он работает и с плавающей точкой, но он не работает с display: table (и, честно говоря, я не вижу смысла использовать его в 2018 году).

Кстати, после .h я добавил еще одну «строку», чтобы мы могли контролировать, что происходит.Если все работает правильно, мы должны увидеть .h вертикально «сворачивающегося» так, чтобы первый и третий ряды были в контакте. 

#one {
  display: inline-block;
  background-color: #F0FFFF;
}

p {
  display: flex;
  justify-content: space-between;
  margin: 0; /* this is crucial because paragraphs have some margin set by default and I cannot know do you "reset" or "normalize" your css */
}

.h {
  transform: scaleY(0); /* this is something that is used actually quite often for animating dropdown menus */
  transform-origin: 50% 0; /* this line of code isn't contributing anythow NOW to your problem, but should you choose to animate "collapsing" the height of the row, it is setting its origin of transformation to the middle of the top border */
  height: 0;
}
<div id="one">
  <p>
    <label for="a">a</label> <input type="text" id="a">
  </p>
  <p class="h">
    <label for="b">bbbbbb</label> <input type="text" id="b">
  </p>
  <p>
    <label for="a">a</label> <input type="text" id="a">
  </p>
</div>

Кроме того, вы можете добавить visibility: hidden, если хотите, но это не меняет решение.Надеюсь, что это помогло.

РЕДАКТИРОВАТЬ:

В поисках решения я только что наткнулся на эту статью (особенно - эта часть ).Хотя в статье предполагается, что visibility: collapse почти никогда не следует использовать, я чувствовал, что стоит упомянуть об этом, поскольку он отвечает на ваш первоначальный вопрос.И, честно говоря, я узнал об этой «особенности» видимости только сейчас, исследуя.Вероятно, потому что никто никогда не использует его: D.

CSS для вашего оригинального кода добавит еще одно правило (но вы также можете объединить его с scaleY, height ...):

#one {
  display: table;
  width: auto;
}

p {
  display: table-row;
}

p label, p input {
  display: table-cell;
}

.h {
  visibility: collapse;
}

Дополнительная литература: MDN: видимость

(видимость: свернуть) Для строк, столбцов, групп столбцов и групп строк, строка (s) или столбец (столбцы) скрыты, и занимаемое ими пространство удаляется (как если бы display: ни один не был применен к столбцу / строке таблицы).Однако размер других строк и столбцов по-прежнему рассчитывается так, как если бы присутствовали ячейки в свернутых строках или столбцах.Это значение позволяет быстро удалить строку или столбец из таблицы без принудительного пересчета ширины и высоты для всей таблицы.

...