D.iK.iJ / Тест. Адаптивные таблицы разными методами

Делаем таблицу мобильной при помощи DIV c прокруткой

Адаптируем таблицу при помощи table {display: block !important; overflow: auto !important;}

Желательно также прописывать tbody {display: table; width: 100%;}

1111111111111111111111111111111111111111	2222222222222222222222222222222222222222	3333333333333333333333333333333333333333	4444444444444444444444444444444444444444
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc	dddddddddddddddddddddddddddddddddddddddd

Адаптируем таблицу при помощи td {display: inline-block !important; width: 100% !important;}

Можно использовать без width: 100%, чтобы блоки вели себя как картинки.
А можно взять более универсальное display: block; width: auto;

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1	2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2	3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3	4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4
a a a a a a a a a a a a a a a a a a a a	b b b b b b b b b b b b b b b b b b b b	c c c c c c c c c c c c c c c c c c c c	d d d d d d d d d d d d d d d d d d d d

Адаптируем таблицу при помощи word-break: break-all;

Есть корректный перенос слов (hyphens: auto;) но он не работает в половине браузеров.

1111111111111111111111111111111111111111	2222222222222222222222222222222222222222	3333333333333333333333333333333333333333	4444444444444444444444444444444444444444
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc	dddddddddddddddddddddddddddddddddddddddd

Адаптируем таблицу c tbody при помощи прокрутки в CSS

Вместо него лучше взять более простой вариант с table {display: block} и добавить tbody {display: table;}

1111111111111111111111111111111111111111	2222222222222222222222222222222222222222	3333333333333333333333333333333333333333	4444444444444444444444444444444444444444
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc	dddddddddddddddddddddddddddddddddddddddd

Адаптируем таблицу c thead и tbody при помощи прокрутки в CSS

Если в таблице с thead мало содержимого, при добавлинии прокрутки она может не заполнять все пространство по ширине. tbody сделать таблицей не получится, но есть вот такой вот вариант с :before.

1111111111111111111111111111111111111111	2222222222222222222222222222222222222222	3333333333333333333333333333333333333333	4444444444444444444444444444444444444444
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa	bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb	cccccccccccccccccccccccccccccccccccccccc	dddddddddddddddddddddddddddddddddddddddd

Адаптируем таблицу при помощи display: block и элементов в :after

Настоящая строка с заголовками у талбицы - скрыта. Левая колонка выполняет роль новых заголовков. А в :after можно прописать любые пояснения к нашим колонкам.

Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4
a a a a a a a a a a a a a a a a a a a a	b b b b b b b b b b b b b b b b b b b b	c c c c c c c c c c c c c c c c c c c c	d d d d d d d d d d d d d d d d d d d d
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1	2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2	3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3	4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4