Как отобразить ячейки заполненными?

Question

[Heorhii]

Всем ку. Прошу помочь в вопросе табличной верстки, на бутстрапе если что, мне нужно чтобы пустые ячейки соответствовали размерам заполненных, ну интересна тут мне конкретно высота. Нагуглил некий empty-cells, вроде то что нужно но ничего не происходит) Скрин приложил. Может у кого есть идеи, поделитесь

Answer 1

[Ankhena]

1. Первые ячейки пустых строк заполнить  .
2. Узнавать на js высоту заполненной и задавать всем.
3.

td::after {
  content: "";
  display: inline-block;
  width: 1px;
  background: green;
  min-height: 1em;
}

Comments

[Heorhii]

Проблема в том что тег td на min-height никак не реагирует

[Ankhena]

Георгий Городенко,
зато ::after реагирует

td::after {
  content: "";
  display: inline-block;
  width: 1px;
  background: green;
  min-height: 1em;
}

ширина и цвет, так, для видимости, в реальной жизни их надо убрать

[boga-net]

Георгий Городенко, а что ж вы сразу не написали в комментарии под ответом ?

[Ankhena]

boga-net, так проверять же надо свои ответы ;)

[boga-net]

Ankhena, Обычно просто оставляют комментарий. Тем более этот комментарий вообще не под мои ответом ) А я вообще случайно увидел, что у вас не сработало

[boga-net]

Ankhena, обновил свой ответ. Может такое решение вас устроит

[Ankhena]

boga-net, Меня нет, меня не устроит. Я против лишних блоков, да еще и добавляемых на js. Тем более, что на js можно просто взять высоту не пустой ячейки и применить её к пустым (или ко всем оптом) ячейкам, без всяких хитростей.

Я бы использовала вариант с ::after и мин высотой. Усовершенствовать его слегка только надо.

[Heorhii]

Ankhena, Спасибо, я воспользовался твоим вариком с   - все окей, меня все устраивает

Answer 2

[boga-net]

min-height: 40px

https://jsfiddle.net/ouodkeLn/195/

Небольшое решение (костыль) на jquery. Ищет пустые блоки в таблице и заполняет их элементом, который имеет класс с opacity: 0.

.hide {
	opacity: 0;
}

$('table td').each(function() {
	var text = $(this).text();
	if (text.length == 0) {
		$(this).html('<u class="hide">empty</u>');
	}
});

https://jsfiddle.net/ouodkeLn/196/

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