Адаптивные таблицы на CSS
704
04 февраля 2017, 09:40
Появилась необходимость в табличном представлении части информации на сайте.
Частично решила задачу адаптивности таблицы по найденному в сети примеру. Решение - в перестраивании представления данных в строчный режим (при медиа min-width = 980 и меньше столбцы "укладываются" горизонтально). Но до этого момента таблица в своем обычном табличном представлении никак не "ужимается", вылезая в итоге за пределы дива по ширине (в предыдущих версиях html таких проблем не было, таблицы "адаптировались" автоматически).
Сейчас у меня отлично адаптируется пустая таблица. Но при внесении в нее данных на разрешениях от 980рх и выше таблица растягивает div, в котором находится по горизонтали, вместо того, чтобы самой "ужиматься".
Внизу появляется полоса прокрутки.
Подскажите, как решить проблему. Желательно без javascript.
Пример:
.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>Пример на стороннем редакторе: jsfiddle-bL4u90x4
Заранее спасибо.
Answer 1
У вас Padding в ячейках таблицы размером 1em:
Уберите его:
.responstable th, .responstable td{
padding: 1em 0;
}
-
21:33
Виртуальный выделенный сервер (VDS) становится отличным выбором
-
22:26
-
22:40
-
08:34
-
15:01
-
17:01
-
11:24
-
10:16
-
17:54
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47682 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30536 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23711 visits
- Как через css изменить цвет png изображения? 10367 visits
- Blob video url download 9976 visits
- Php curl запрос через прокси с авторизацией 9231 visits
- Работа с captcha vk api 8112 visits
© "hostciti.net" 11.1.2025 | 22:52