Appeared the need for a tabular representation of the information on the site.
Partially solved the problem of adaptability of the table by the example found on the network. The solution is to rebuild the presentation of data in the row mode (with media min-width = 980 and less, the columns "fit" horizontally). But up to this point, the table in its usual tabular representation doesn’t "shrink" at all, as a result getting out beyond the limits of diva in width (in previous versions of html there were no such problems, the tables were "adapted" automatically).
Now I have an adaptable empty table. But when entering data into it at resolutions from 980рх and above, the table stretches the div in which it is located horizontally , instead of being compressed. A scroll bar appears at the bottom.
Tell me how to solve the problem. Preferably without javascript .
Example:
.responstable { margin: 1em 0; width: 100%; overflow: hidden; background: #FFF; color: #024457; border-radius: 0px; border: 1px solid #167F92; text-align: center; } .responstable tr { border: 1px solid #D9E4E6; } .responstable tr:nth-child(odd) { background-color: #EAF3F3; } .responstable th { display: none; border: 1px solid #D9E4E6; background-color: #cecece; color: #000000; padding: .5em; font-size: .8em; } .responstable th:first-child { display: table-cell; text-align: center; } .responstable th:nth-child(2) { display: table-cell; } .responstable th:nth-child(2) span { display: none; } .responstable th:nth-child(2):after { content: attr(data-th); } @media (min-width: 980px) { .responstable th:nth-child(2) span { display: block; } .responstable th:nth-child(2):after { display: none; } } .responstable td { display: inline; word-wrap: break-word; max-width: 7em; } .responstable td:first-child { display: table-cell; text-align: center; border-right: 1px solid #D9E4E6; } @media (min-width: 980px) { .responstable td { border: 1px solid #D9E4E6; } } .responstable th, .responstable td { text-align: center; margin: .5em 1em; } @media (min-width: 980px) { .responstable th, .responstable td { display: table-cell; padding: 1em; } } <table class="responstable"> <tr> <th data-th="Характеристики"><span>Кол-во<br /> комнат</span> </th> <th>Адрес, р-н</th> <th>Метро</th> <th>S <br /> <br />о <br />б <br />щ</th> <th>S <br /> <br />к <br />о <br />м <br />н</th> <th>S <br /> <br />к <br />у <br />х</th> <th>Эт</th> <th>С/у</th> <th>Тип дома</th> <th>Цена</th> <th>Срок</th> <th>Примечания</th> <th>TV</th> <th>Хол</th> <th>СтМ</th> <th>Тел</th> <th>Инт</th> </tr> <tr> <td>2к.кв.</td> <td>ул.Софьи Ковалевской, д.5, корп.5, Калининский р-н</td> <td>Академич, 10 мин.пешком</td> <td>45</td> <td>(18+12)</td> <td>7</td> <td>4/7</td> <td>разд с/у</td> <td>пан</td> <td>18.000</td> <td>11мес</td> <td>Меб+</td> <td>+</td> <td>+</td> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td>1к.кв.</td> <td>Гражданский пр-кт, д.19, корп.3, Калининский р-н</td> <td>Академическая, 7 м.п.</td> <td> </td> <td>18</td> <td>7</td> <td>5/9</td> <td>совм с/у</td> <td>Кирп</td> <td>16.000</td> <td>12мес</td> <td>Только Кух/Меб, +КУ, +Свет, Залог 50 %, Чисто, Хор/Сост, Без/Меб, Кух/Меб, Окна-Двор, Окна-Зелень, Ванна Сидячая, Газ/Плита, Не Рассм Гастарб/Рабоч/Строит, Гражд/РФ, Для 1-3 Чел </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>1к.кв.</td> <td>Невский р-н, Товарищеский пр-кт, д.16, корп.1</td> <td>Большевиков пр., 12 м.п.</td> <td>30</td> <td>16</td> <td>7</td> <td>3/16</td> <td> </td> <td> </td> <td>19.000</td> <td>11мес</td> <td>Меб+ Хор/Сост, Есть Все Необх Оборуд/Мебель!, Спальн/Мест-3, Для Гражд/РФ, +КУ, Залог </td> <td>+</td> <td>+</td> <td>+</td> <td>+</td> <td>+</td> </tr> <tr> <td>2к.кв.</td> <td>Фрунзенский р-н, ул.Белградская, д.28, корп.5</td> <td>Международная, 15 м.п.</td> <td>45</td> <td>14+16</td> <td>6</td> <td>1/12</td> <td> </td> <td>ПН</td> <td>20.000</td> <td>11мес</td> <td>Меб+ +КУ, Залог/Вн/Част/Поэт, Гражд/РФ, Для 1-3 Чел, Для Сем/Пары с Реб </td> <td>+</td> <td>+</td> <td>+</td> <td>+</td> <td>+</td> </tr> <tr> <td>2к.кв.</td> <td>Красносельский р-н, ул.Маршала Казакова, д.50, корп.1</td> <td>Автово, Ленинский пр., пр.Ветеранов, 15 м.тр.</td> <td>?</td> <td>15+16</td> <td>9</td> <td>8/10</td> <td>разд с/у</td> <td> </td> <td>23.000</td> <td>11мес</td> <td>Лдж, Новый Дом, Нов/Дом, Отл/Сост, Стекло-Пакеты, С/У в Кафеле, Застекл/ЛДЖ, Встр/Кух, Сдается с 11.05, а Смотреть Мож/Сейчас! </td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>+</td> </tr> <tr> <td>1к.кв.</td> <td>Московский р-н, ул.Ленсовета, д.51</td> <td>Звездная, Московская, 10 м.п.</td> <td>42</td> <td>18</td> <td>9</td> <td>3/12</td> <td>совм с/у</td> <td> </td> <td>21.000</td> <td>11мес</td> <td>Меб+ , Блк, Евро/Рем, Есть вся Быт/Тех, Есть Все Необх Оборуд, Развитая Инфра/Стр-ра, Гражд/РФ, +КУ </td> <td>+</td> <td>+</td> <td>+</td> <td>+</td> <td>+</td> </tr> <tr> <td>1к.кв.</td> <td>Московский р-н, Витебский пр-кт, д.31</td> <td>Парк Победы, 4 ост.</td> <td>33</td> <td>16</td> <td>6</td> <td>2/5</td> <td> </td> <td> </td> <td>17.000</td> <td>11мес</td> <td>Хор/Сост, Есть Все Необх Оборуд/Мебель!, Для Гражд/РФ, +КУ, Залог </td> <td>+</td> <td>+</td> <td>+</td> <td>+</td> <td>+</td> </tr> <tr> <td>2к.кв.</td> <td>Выборгский р-н,ул.Сикейроса, д.1</td> <td>Озерки 330 м, 5 м.п.</td> <td>91</td> <td>24+22</td> <td>17</td> <td>7/9</td> <td>совм с/у</td> <td>Кирп</td> <td>40.000</td> <td>11мес</td> <td>Лдж, Есть Лифт, Без/Жив, Для 1-2 Чел, Для Пары, Идеальн/Сост, Чистая Парадная, Дизайн, Евро/Рем, Есть Все Необх Оборуд/Мебель!, Развитая Инфра/Стр-ра, Озеро, +КУ </td> <td>+</td> <td>+</td> <td>+</td> <td>+</td> <td>+</td> </tr> <tr> <td>2к.кв.</td> <td>Пушкинский р-н, п.Шушары, тер.Ленсоветовский, д.288</td> <td>Купчино 9.4 км, Звездная 10.6 км, Московская 13 км</td> <td>55</td> <td>13+16</td> <td>13</td> <td>5/5</td> <td>разд с/у</td> <td>Кирп <br />/Мон</td> <td>19.000</td> <td>12мес</td> <td>Возм с Меб, 2Блк, Новый Дом</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> <td>-</td> </tr> </table> Example on a third-party editor: jsfiddle-bL4u90x4
Thank you in advance.
