Задать вопрос
kanonir1886
@kanonir1886
html

Как в таблице организовать упорядоченный вывод td?

Добрый день. Есть две строки в таблице tr1, tr2(Рис1). В этих двух строках, есть определенное количество столбцов td.
При уменьшении экрана нужно сделать, чтобы tr1, как бы склеивался с tr2, и получалось,как на (Рис2).

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


16241996bbe04d159456c1ab2e158245.pngРис1
0d491ed0d3ed4241a0bda5a60794cb2a.pngРис2

p.s.Заранее прошу прощение за возможно неверную формулировку вопроса.
  • Вопрос задан
  • 145 просмотров
2 комментария
Подписаться 1 Оценить 2 комментария
Пригласить эксперта
Ответы на вопрос 3
@GreatRash
Это конечно мега-извращение, но можно при помощи JS закинуть все td в первую tr. Далее в CSS прописать:

table, tr {
  display: block;
}

td {
  display: inline-block;
}


Правда не знаю как к подобному надругательству отнесётся IE, но все хорошие браузеры проглотят.
Ответ написан
Комментировать
Комментировать
shultais
@shultais
Обучаю программированию на Python и SQL
Например так
<!DOCTYPE html>
<html>
<head>
<style>
    .boxes {
         max-width: 400px;
    }
    .box {
        display: block;
        float: left;
        width: 80px;
        height: 80px;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    
    .box-blue {
        background-color: blue;
    }
    
    .box-red {
        background-color: red;
    }
</style>
<body>
<div class="boxes">
	<div class="box box-blue"></div>
	<div class="box box-blue"></div>
	<div class="box box-blue"></div>
	<div class="box box-blue"></div>
	
	<div class="box box-red"></div>
	<div class="box box-red"></div>
	<div class="box box-red"></div>
	<div class="box box-red"></div>
</div>
</body>
</html>
Ответ написан
Комментировать
Комментировать
@feldwebel
Откажитесь от HTML вообще, отдавайте скриптом JSON, данные из которого отрисовывайте на фронте, как левая нога начальника захочет.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Расширение для Google Chrome
22 дек. 2024, в 20:34
3000 руб./за проект
Ещё заказы