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

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

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

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


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

p.s.Заранее прошу прощение за возможно неверную формулировку вопроса.
  • Вопрос задан
  • 144 просмотра
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, данные из которого отрисовывайте на фронте, как левая нога начальника захочет.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
[python,go] Залить ВИДЕО в тикток
19 апр. 2024, в 23:00
5000 руб./за проект
Разработка VST-плагина
19 апр. 2024, в 20:43
20000 руб./за проект
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Ещё заказы