Как сделать тянущийся table?

Question

[Space]

Как сделать тянущийся table?

<table class="compare-info">
    <thead>
      <tr>
        <td ></td>
      </tr>
    </thead>
    <tbody>
    </tbody>
</table>

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

Answer 1

[Maksim Zverev]

Эээээм, вы прикалываетесь да?

.compare-info{
  width: 100%;
}

Comments

[Space]

если бы было так

[Maksim Zverev]

Иван: что так было бы?

[Space]

не появляется горизонтальная прокрутка и толком не сжимается

[Maksim Zverev]

Иван: Значит вы не правильно описали задачу: codepen.io/m1skam/pen/HvEsy вот тут все сжимается, нет горизонтальной прокрутки.

[Space]

Maksim Zverev: вот страница шаблона journal.digital-atelier.com/1/index.php?route=prod... , добавьте сначала 4 товара в сравнение в шаблоне на главной, кнопка add to compare, а потом попробуйте уменьшить окно браузера на той странице. С помощью отладки можете прописать там и ничего не изменится. Как не пытался

[Maksim Zverev]

Иван: ну вы и ставите задачи. Ширина при которой 4й товар уходит за предел области видимости 800px, если проблема на мобильных устройствах, то да, горизонтальной прокрутки нет, но увидеть все можно, просто сместив контент перетаскивая пальцем.
Если вам вот именно нужна горизонтальная прокрутка, то надо сверху одевать обертку с фиксированной шириной и overflow-x: auto

[Space]

Maksim Zverev: Спасибо. Ширину сделал 100 пр и overflow-x: auto добавил, в заранее обвернутый див.

Answer 2

[Евгений Попов]

Пример jsfiddle.net/81w00rw5

Comments

[Space]

не появляется горизонтальная прокрутка и толком не сжимается

[Евгений Попов]

Что значит толком не сжимается? Она подстраивается под размеры окна. Или вам нужно чтобы еще были побуквенные переносы или скрытия строк - это уже совсем другие задачи, но так же решаемые на css