Как таблицы в контейнере растянуть на всю ширину при включении мобильной версии?

Question

[Tony C.]

Всем привет! Не могу побороть задачку:
на сайте, на некоторых страницах встречаются вот такие таблицы:
take.ms/1Vjxu
Нужно сделать так, чтоб при включении мобильной версии сайта таблицы занимали всю ширину окна, вот так:
take.ms/NLHVB

Проблема заключается в том, что все таблицы лежат в контейнере, который ограничивает ширину не только самой таблицы, а еще заголовков, списков и тд и тп. (например выше есть абзац).
Думал о том, чтоб оборачивать таблицу во wrapper и ему давать отрицательный margin

if (window.matchMedia('(max-width:1100px)').matches) {
  $('.table-responsive').wrap('<div class="table-wrap"></div>');
}

Но у контейнера очень хитрая ширина и не получается вычитать правильный отступ.
width: calc(90% - 40px)

Буду очень благодарен за советы.

Answer 1

[display: block]

codepen.io/anon/pen/grjpZK

Comments

[Tony C.]

этот способ не помог :( ничего не меняется