Как сделать адаптивным такое шахматное поле?

Question

[Swartex]

Есть вот такая шахматная верстка https://jsfiddle.net/Swartex/4g7m5u9b/ хочу сделать адаптивность, можно с использованием Bootstrap. Но когда дошло до адаптивности я ума не приложу как это сделать, ведь в tr я не могу вставить <div class="row"></div>. Мне кажется что я не правильно сделал эту верстку с шахматными блоками. Прошу вашего совета.

Comments

[Максим]

ссылка не работает

[Swartex]

Максим Ленский, поправил

[Ankhena]

Максим Ленский, тык запятая

Swartex и во что оно должно превращаться при адаптации? Макет/скрин/словами?

[Swartex]

Ankhena, на сколько я понял, надпись -- картинка(там где пустые блоки) уменьшена до опеределнного размера.

[Ankhena]

Swartex, ну так и поставьте ширину в процентах и min-width: определенный_размер

[Swartex]

Ankhena, сейчас сделаю это флексбоксами

[Максим]

Ankhena, я уже сделал на table , оцените

[Сергей]

Кто-то вернул мой 2003. Верстка на таблицах) Давно не видел такого

Answer 1

[Максим]

https://codepen.io/MaximLensky/pen/yzqKNX?editors=1000 шах и мат ... 100% адаптивная таблица
https://codepen.io/MaximLensky/pen/dVjdOd?editors=1100 второй вариант ... ваш

Comments

[Gortyser]

Только разглядеть в такой таблице ничего не получится.
И она скорее резиновая, чем адаптивная.

[Максим]

Gortyser, выглядит как доска ... квадрат .. как и должно быть .. на всех разрешениях

[Максим]

Gortyser, добавить медиа запрос и будет то что надо

[Ankhena]

Gortyser, резиновая это частный случай адаптивности
Максим Ленский, оцениваю!

Поскольку на данный момент мы все равно не знаем, как именно ее собирался адаптировать автор вопроса, то это самое подходящее к вопросу решение :)

[Максим]

Ankhena, второй вариант сделал ... он лучше ... оцените ...

Answer 2

[Илья Мясин]

https://codepen.io/dubrowsky/pen/oGMomN
Это конечно не ваша задача, зато на флексбоксах из плоского списка, труъ-адаптив, остается шахматной при четном количестве колонок, и я вспомнил, как программировать на LESS :)

Answer 3

[zoozag]

Главный совет: Не верстайте таблицами, то что должно быть адаптивным

Comments

[Ankhena]

Таблицами нужно верстать табличные данные, а не в зависимости от того будет оно адаптироваться или нет.

[Gortyser]

Ankhena, а если в таблице 10, допустим, столбцов, то что делать? Логичный вариант - просто добавить скролл, но хочется чего-то другого.

[Ankhena]

Gortyser, эммм.. в смысле что делать?
10 каких слобцов, что в них?
В зависимости от этого и решается что именно с ними делать.

но хочется чего-то другого

когда вместо верстки таблиц таблицами хочется чего-то другого, надо идти и делать что-то другое )))

Answer 4

[Gortyser]

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

Comments

[Максим]

это не таблица ... это flex

[Gortyser]

Максим Ленский, в задании автора нет условия, что это должна быть таблица. Тем более по смыслу это совсем не таблица.

[Максим]

Gortyser,

как это сделать, ведь в tr

это из слов автора ... ни в одном из других вариантов css и html нету больше ни где tr

[Максим]

Gortyser, https://ru.stackoverflow.com/q/729912/33274 это его вопрос на ruSO , СМОТРИТЕ НА РАЗМЕТКУ