Задать вопрос
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 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Тестирование модуля ElasticSearch через ftp
22 нояб. 2024, в 03:54
1500 руб./за проект
Телеграм бот
22 нояб. 2024, в 02:56
10000 руб./за проект
Перерисовать логотип в векторе
22 нояб. 2024, в 00:55
500 руб./за проект
Ещё заказы