Как сделать более или менее нормальную мобилопригодность для таблицы?

1 вариант: table {width: 100%; word-wrap: break-word; table-layout: fixed;} - таблица будет по ширине экрана, но все столбцы - равной ширины.

2 вариант: обернуть таблицу в <div class="wrap">, дав ему стиль:

@media screen and (max-width: 768px) {

table {width: 100%; word-wrap: break-word;}
.wrap {max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch;}

}

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

if ($('table').length > 0) {
$('table').wrap('<div class="wrap">');
}

table, th, tbody, tr, th, td {
    display: block;
    width: 100%;
}

Спасибо за 1 вариант, он вроде бы работает так как я и хотел сделать.

Я так и не понял, вроде я этот width: 100% ставил и на таблицу и на ячейки и даже с импортантом, вроде не было нигде статических размеров, и самое главное таблица сжималась до определенного размера, а потом на каком-то моменте блочилась, как будто бы ей мешают ячейки или что то еще фиг знает что, казалось бы ну сжимайся дальше статических величин нигде не прописано везде 100%!important на всем что можно, нифига, блочится в определенный момент и все.

Забавно что в сервисе гугл по проверке сайта на мобилопригодность, он писал мне что – и ширина выходит за рамки и шрифты маленькие и элементы близко друг к другу, а когда с шириной я поправил то стало все ОК и со шрифтами и с близкими элементами.

table-layout: fixed - делает столбцы равной ширины и подгоняет таблицу по ширине экрана

word-wrap: break-word - разбивает слова, если они не вмещаются по ширине

Для удобства чтения лучше второй вариант.