Как адаптировать таблицу в Битриксе?

Question

[Надежда Головина]

На Битриксе есть таблица в карточке товара (справа).
В мобильнике так получается:

Подскажите, как сделать ее адаптивной?
Самый лучший вариант - способ переноса слов на новую строку, как в exel. Чтобы влезала вся таблица. Как тут:

Но предполагаю, что придется заново верстать, с расчетом на адаптив.

Comments

[Олег]

Руки тому, кто таблицами без необходимости верстает поотбивать
Вообще сексотная верcтка, даже для таблицы. По семантике. В td запихивать p, div

Answer 1

[Надежда Головина]

Изобрела свой велосипед) Вот результат:


Адаптив через @ media:

@media screen and (max-width: 800px) {
	table.kartochka td {display: block;}
	table.kartochka td::before {
		content: attr(data-label);
		float: left;
		font-size: 17px;
		margin-top: 2px;
		margin-right: 20px;
	}
	table.kartochka td.align::before, table.kartochka td.align-old::before {
		font-size: 27px;
		font-weight: 300;
	}
	table.kartochka td.align::before {
		color: #87b523;
	}
	.btn {font-size: 16px !important;}
	.name-baza, .name-on_photo, .span-price, .span-old_price {
		/*float: left;*/
	}
	.good .right .btn {
	padding-left: 0;
	padding-right: 0;
	}
	table.kartochka .colspan {
		display: none;
  	}
}

Comments

[Надежда Головина]

Вернулась снова к этой задаче и нашла еще одно решение.
Т.к. это таблица, в ячейках которых выведены свойства через<pre>...</pre>, то к ним применяется white-space. В моем случае это white-space: pre-wrap;

Answer 2

[Андрей Никифоров]

Попробуй изобрести велосипед из этого https://codepen.io/true404/pen/jxxQRx

Answer 3

[art style]

верстать через flexbox
адаптировать через @ media