Как сохранить пропорции таблицы при уменьшении разрешения?

Question

[Наталия]

Добрый день!
У меня есть такая таблица:

<table class="section4_table"  border="1" cellpadding="4">
<tr>
   <th style="background-color: #f9f9f9;"></th>
   <th style="background-color: #f9f9f9;" class="section4_table-name">Заголовок 1</th>
   <th style="background-color: #f9f9f9;" class="section4_table-name">Заголовок 2</th>
   <th style="background-color: #f9f9f9;" class="section4_table-name">Заголовок 3</th>
</tr>

<tr>
   <td> <h4 class="section4_table-header-h4"> позиция 1 </h4> </td>
   <td> текст </td>
   <td> текст </td>
   <td> текст </td>
</tr>

<tr>
   <td style="border-bottom:1px solid white;"> <h4 class="section4_table-header-h4"> позиция 2 </h4> </td>
   <td style="border-bottom:1px solid white;">
      <div class="section4-list_item">
         <div class="left-float"> (иконка) </div>
          <div class="section4-list_item-right_block"> описание 1 </div>
      </div>
   </td>
   <td style="border-bottom:1px solid white;"> <div class="section4-list_item">
      <div class="left-float">(иконка) </div>
      <div class="section4-list_item-right_block"> описание 2 </div>
      </div> 
   </td>
   <td style="border-bottom:1px solid white;"> <div class="section4-list_item">
      <div class="left-float"> (иконка) </div>
      <div class="section4-list_item-right_block"> описание 3 </div>
      </div>
   </td>
</tr>
</table>

и таких строк с четырьмя ячейками много - таблица большая.

На мобильном устройстве страница адаптируется, кроме этой таблицы - она не меняет масштаб и не влезает в окно.
Есть ли какой-нибудь способ сделать так, чтоб она пропорционально уменьшалась и полностью влезала в экран телефона?

заранее спасибо.

Comments

[Сергей delphinpro]

ограничьте ширину max-width: 100%
и зафиксируйте ее table-layout: fixed;

[Наталия]

Сергей: прописала в стиля:

.section4_table {
   max-width: 100%;
   table-layout: auto;
}

не помогло. Таблица все равно не уменьшается, а обрезается.

Answer 1

[Капитан Какао]

Ну что бы прям пропорционально уменьшать всю таблицу, нужно или JS скрипт пилить, или запихнуть таблицу в SVG, демо: https://jsfiddle.net/RadCor/rtqfho5v/

Что бы увидеть результат -изменяйте ширину области с результатом.

UPDATE 1
Подправил код, теперь таблица влазит целиком.
https://jsfiddle.net/RadCor/rtqfho5v/1/

UPDATE 2
Ограничил максимальный размер таблицы
https://jsfiddle.net/RadCor/rtqfho5v/2

Comments

[Наталия]

единственная проблема - теперь эта таблица вообще убирается в IE
Как сделать, чтоб она и в этом браузере отображалась ?

[Капитан Какао]

Наталия: без понятия, уже лет 5 принципиально не пишу код под IE.
Если человек осознанно пользуется IE, создавая тем самым себе проблемы, и не хочет переходить на адекватный браузер, почему же я должен решать его проблемы? Такова моя политика)

[Ярослав Иванов]

Rad Cor: вы теряете огромный рынок: 0,0001%

[Капитан Какао]

Ярослав Иванов: надеюсь это сарказм)

[Наталия]

Rad Cor: в некоторый компаниях пользуются IE, тк в них нормально электронные ключи работают.

[Sergiu Mitu]

О боже, впервые вижу такое, спасибо за фокус с svg.

Answer 2

[Павел Радьков]

https://codepen.io/paulradzkov/pen/zzvOvR?editors=1100
вариант без svg и без js, но с кучей других органичений:
- нужно знать точные width и height таблицы для calc вычислений в css
- нужно знать все дополнительные горизонтальные размеры вокруг таблицы. это могут быть маргины, паддинги, ширина сайдбара и т.д.
- нужно делать кастомный брейкпоинт на основании всех этих размеров

Добавлено
Поторопился я отправлять — работает только в blink и webkit