Невозможно получить HTML таблицу одинаковой ширины на всех устройствах

Question

Я пытаюсь сделать ширину таблицы согласованной на всех устройствах, чтобы на мобильных устройствах, на которых загружен сайт, не было никакого влияния справа и снаружи на мобильные устройства. Вот два изображения для сравнения, которые показывают только два примера среди десятков различных мобильных устройств (iOS и Android).

Я пытался изменить таблицу CSS на различные степени, включая ширину, максимальную ширину, фиксированную и т. Д. c. Но, похоже, ничего не работает. Я думал, что простой компромисс данной ширины среди всех устройств добился бы цели, но ширина никак не влияет. Почти как атрибут width больше не распознается браузерами.

Чтобы попасть на этот экран, добавьте товар в корзину по адресу https://intechrahealth.com/. Это страница оформления заказа. Любая помощь приветствуется.

Answer 1

Ваш font-size слишком большой. Если вы сократите его, весь стол может сжаться и поместиться правильно. Измените этот запрос здесь

@media (max-width: 479px)
  #content table.cart td, #content table.cart th, #content table.cart tr, table.cart
  td, table.cart th, table.cart tr {
    padding: .857em .287em!important;
  }
}

На это с отзывчивым font-size

@media (max-width: 479px)
  #content table.cart td, #content table.cart th, #content table.cart tr, table.cart
  td, table.cart th, table.cart tr {
    padding: .857em .287em!important;
    font-size: 3vw;
  }
}