Адаптивные таблицы

@estic · Регистрация: 01.10.2018

Студворк — интернет-сервис помощи студентам

Можно как-то сделать таблицу адаптивной или хотя бы добавить к ней (а не к странице) горизонтальную прокрутку без ее оборачивания дополнительным тегом?

Qwerty_Wasd · 21.10.2018, 15:05

estic,

Сообщение от estic

адаптивной

адаптивной к чему? К каким размерам и ориентации экрана? Вы уже определили интерфейс таблицы? Или может Вы имели ввиду резиновую верстку, чтобы таблица меняла размер в соответствии с размером её вьюпорта?

Вот так одно модное слово, сказанное не к месту, может вызвать кучу ответных вопросов. Что конкретно должно происходить с таблицей и при каких условиях?

@estic · 21.10.2018, 20:28 **[ТС]**

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

И, видимо, вы не до конца уловили суть вопроса. Вопрос касался не адаптации под какие-то конкретные размеры и т.п. Меня интересует, можно ли делать адаптацию без оборачивания тега TABLE и если да, то как.

Добавлено через 10 минут
Видимо, можно. Вот нашел кое-что: https://codepen.io/sanagl/pen/WMweeP - кто-нибудь может прокомментировать это решение или предложить свое?

@Fedor92 · 21.10.2018, 20:30

estic, вариантов несколько... Либо Вы задаёте размеры таблицы, включая ячейки в процентах(но может вылезти контент на мобилах) - либо верстаете таблицу на дивах, для десктопа на брекпойнтах задаёте табличные свойства для блоков - display:table/display:table-cell, а на мобильных устройствах выставляете значение disply:block? чтобы они выстраивались вертикально...

@AlexZaw · 21.10.2018, 20:43

Сообщение от estic

Если вам незнакомо понятие "адаптивная таблица"

Оно незнакомо потому, что такого понятия не существует.Таблица ВСЕГДА занимает столько места, сколько в ней контента.

Сообщение от estic

Меня интересует, можно ли делать адаптацию без оборачивания тега TABLE

Если вы хотите использовать именно скролл то без оборачивания не обойтись.

Сообщение от estic

и если да, то как.

Можно воспользоваться следующим методом(который вы, кстати, легко могли найти самостоятельно вместо того что-бы хамить тем кто пытается помочь), только это, по сути, уже не таблица будет, хотя разметка и будет табличной.
https://codepen.io/geoffyuen/pen/FCBEg

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<h1>RWD List to Table</h1>
<table class="rwd-table">
  <tr>
    <th>Movie Title</th>
    <th>Genre</th>
    <th>Year</th>
    <th>Gross</th>
  </tr>
  <tr>
    <td data-th="Movie Title">Star Wars</td>
    <td data-th="Genre">Adventure, Sci-fi</td>
    <td data-th="Year">1977</td>
    <td data-th="Gross">$460,935,665</td>
  </tr>
  <tr>
    <td data-th="Movie Title">Howard The Duck</td>
    <td data-th="Genre">"Comedy"</td>
    <td data-th="Year">1986</td>
    <td data-th="Gross">$16,295,774</td>
  </tr>
  <tr>
    <td data-th="Movie Title">American Graffiti</td>
    <td data-th="Genre">Comedy, Drama</td>
    <td data-th="Year">1973</td>
    <td data-th="Gross">$115,000,000</td>
  </tr>
</table>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
@import "https://fonts.googleapis.com/css?family=Montserrat:300,400,700";
.rwd-table {
  margin: 1em 0;
  min-width: 300px;
}
.rwd-table tr {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.rwd-table th {
  display: none;
}
.rwd-table td {
  display: block;
}
.rwd-table td:first-child {
  padding-top: .5em;
}
.rwd-table td:last-child {
  padding-bottom: .5em;
}
.rwd-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
}
@media (min-width: 480px) {
  .rwd-table td:before {
    display: none;
  }
}
.rwd-table th, .rwd-table td {
  text-align: left;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child, .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child, .rwd-table td:last-child {
    padding-right: 0;
  }
}
 
body {
  padding: 0 2em;
  font-family: Montserrat, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #444;
  background: #eee;
}
 
h1 {
  font-weight: normal;
  letter-spacing: -1px;
  color: #34495E;
}
 
.rwd-table {
  background: #34495E;
  color: #fff;
  border-radius: .4em;
  overflow: hidden;
}
.rwd-table tr {
  border-color: #46637f;
}
.rwd-table th, .rwd-table td {
  margin: .5em 1em;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    padding: 1em !important;
  }
}
.rwd-table th, .rwd-table td:before {
  color: #dd5;
}

Qwerty_Wasd · 21.10.2018, 20:54

estic,

Сообщение от estic

из контекста можно было понять, что речь идет об адаптации под небольшую (минимальную) ширину.

ну не факт же - кол-во колонок например не влезающие во вьюпорт, тоже может понадобится overflow-x для контейнера. Но Вас я понял - посмотрел пример, который Вы привели. В принципе ответ Вам дали Fedor92 и AlexZaw. А во поводу

Сообщение от estic

без оборачивания тега TABLE

у Вас же не голая таблица на странице? Она в любом случае наверное будет иметь родителя?

Fedor92, AlexZaw, приветствую

@Fedor92 · 21.10.2018, 20:57

Сообщение от AlexZaw

Оно незнакомо потому, что такого понятия не существует.

Только недавно верстал лендос...

Не по теме:

Добавлено через 22 секунды

Сообщение от Qwerty_Wasd

Fedor92, AlexZaw, приветствую

Привет! :)

Qwerty_Wasd · 21.10.2018, 21:06

Fedor92,

Не по теме:

Сообщение от Fedor92

Сообщение от AlexZaw
Оно незнакомо потому, что такого понятия не существует.
Только недавно верстал лендос...

он имел ввиду, что понятия адаптивная верстка и responsive уже так извратили те, у кого SPA это тоже, что и лендинг, что наполняя контентом свои недоблоги, играют словами как хотят. А потом появляется армия людей трясущие этими "понятиями".

@AlexZaw · 21.10.2018, 21:06

Не по теме:

Сообщение от Fedor92

Только недавно верстал лендос...

Это не совсем то :) Простая резина, да и вы сами упомянули что на мобильных может вылезти контент, особенно если колонок добавится :) "Адаптация" таблиц та еще головная боль, кстати интересно, как верстальщики писем поступают в ситуации когда много колонок приходится делать?

Qwerty_Wasd, доброго времени суток!

@estic · 21.10.2018, 21:27 **[ТС]**

Сообщение от AlexZaw

Если вы хотите использовать именно скролл то без оборачивания не обойтись.

Значит, для моего случая остается только адаптация? Если исключить такие экстремальные вещи, как замена таблицы изображением (группой изображений).

Не по теме:

Хамства за собой не замечал. Вы точно это мне писали? :)

Сообщение от Qwerty_Wasd

у Вас же не голая таблица на странице? Она в любом случае наверное будет иметь родителя?

Имелось в виду оборачивание исключительно тега TABLE.

Добавлено через 4 минуты

Сообщение от AlexZaw

кстати интересно, как верстальщики писем поступают в ситуации когда много колонок приходится делать?

Кстати, они в этом случае могут заменить таблицу изображением (группой изображений).

Qwerty_Wasd · 21.10.2018, 21:29

estic,

Сообщение от estic

Имелось в виду оборачивание исключительно тега TABLE.

без обертки с большим кол-вом колонок, не влезающими во вьюпорт, не получится. Родителю придется давать overflow-x: auto. Чтобы размер страницы не вышел за экран, но при этом можно было посмотреть саму таблицу, либо ломаем структуру таблицы по брекпоинтам.

@AlexZaw · 21.10.2018, 21:40

Сообщение от estic

Значит, для моего случая остается только адаптация?

Если принципиально нельзя добавить обертку для таблицы тогда да, только такой выход. Либо, вместо таблицы сверстать дивами, как предложил Fedor92. В принципе можно даже display: table-cell; не использовать.
Хотя тут зависит от ситуации. Может у вас такая таблица что проще сделать обертку (возможно даже с помощью js, если нет доступа к html) чем писать кучу css пытаясь привести все в удобочитаемый вид.

Сообщение от estic

Кстати, они в этом случае могут заменить таблицу изображением (группой изображений).

Не вариант, во-первых сразу увеличится объем данных, и значит, при медленном соединении письмо будет долго загружаться, а во-вторых картинка на мобильном может стать нечитаемой и придется ее все равно увеличивать и скроллить.

Qwerty_Wasd · 21.10.2018, 21:53

AlexZaw, estic, кстати говоря о

Сообщение от AlexZaw

как верстальщики писем поступают в ситуации когда много колонок приходится делать?

Сообщение от estic

они в этом случае могут заменить таблицу изображением (группой изображений).

я думаю если верстальщик хоть немного с головой дружит, он сделает если не лучше, то хотя бы так - https://codepen.io/qwerty_wasd/pen/GYBJvo

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div class="wrapper-table-module">
  <input id="column1" name="column" type="radio" checked=""/>
  <input id="column2" name="column" type="radio"/>
  <input id="column3" name="column" type="radio"/>
  <nav>
    <label for="column1">1</label>
    <label for="column2">2</label>
    <label for="column3">3</label>
  </nav>
  <table class="break-table">
    <colgroup>
      <col/>
      <col/>
      <col/>
    </colgroup>
    <thead>
      <tr>
        <th>
          <h3>Заголовок 1</h3>
        </th>
        <th>
          <h3>Заголовок 2</h3>
        </th>
        <th>
          <h3>Заголовок 3</h3>
        </th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>
          <h3>Подвал 1</h3>
        </td>
        <td>
          <h3>Подвал 2</h3>
        </td>
        <td>
          <h3>Подвал 3</h3>
        </td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>Бла-бла-бла</td>
        <td>Бла-бла-бла</td>
        <td>Бла-бла-бла</td>
      </tr>
      <tr>
        <td>Бла-бла-бла</td>
        <td>Бла-бла-бла</td>
        <td>Бла-бла-бла</td>
      </tr>
    </tbody>
  </table>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normilize.css\reset.css*/
html,
body {
  height: 100%;
  width: 100%;
}
 
.wrapper-table-module {
  padding: 3em;
}
.wrapper-table-module input[name="column"] {
  display: none;
}
.wrapper-table-module nav {
  display: none;
  justify-content: center;
}
.wrapper-table-module nav > label {
  color: #DD2C00;
  display: inline-block;
  padding: 1em;
  cursor: pointer;
}
.wrapper-table-module table {
  border: 1px solid #b1b1b1;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.wrapper-table-module table td {
  padding: 2em;
  width: 33.33%;
}
.wrapper-table-module table th {
  padding: 2em;
  width: 33.33%;
}
.wrapper-table-module table tbody td,
.wrapper-table-module table thead th {
  border-bottom: 2px solid #000000;
}
 
@media screen and (max-width: 768px) and (orientation: portrait) {
  .wrapper-table-module {
    padding: 1em;
  }
  .wrapper-table-module nav {
    display: flex;
  }
  .wrapper-table-module table th {
    display: none;
    width: 100%;
  }
  .wrapper-table-module table td {
    display: none;
    width: 100%;
  }
  .wrapper-table-module input:checked:nth-of-type(1) ~ nav label:nth-of-type(1) {
    border-bottom: 3px solid #000000;
    color: black;
  }
  .wrapper-table-module input:checked:nth-of-type(1) ~ table tr > td:nth-of-type(1) {
    display: table-cell;
  }
  .wrapper-table-module input:checked:nth-of-type(1) ~ table tr > th:nth-of-type(1) {
    display: table-cell;
  }
  .wrapper-table-module input:checked:nth-of-type(2) ~ nav label:nth-of-type(2) {
    border-bottom: 3px solid #000000;
    color: black;
  }
  .wrapper-table-module input:checked:nth-of-type(2) ~ table tr > td:nth-of-type(2) {
    display: table-cell;
  }
  .wrapper-table-module input:checked:nth-of-type(2) ~ table tr > th:nth-of-type(2) {
    display: table-cell;
  }
  .wrapper-table-module input:checked:nth-of-type(3) ~ nav label:nth-of-type(3) {
    border-bottom: 3px solid #000000;
    color: black;
  }
  .wrapper-table-module input:checked:nth-of-type(3) ~ table tr > td:nth-of-type(3) {
    display: table-cell;
  }
  .wrapper-table-module input:checked:nth-of-type(3) ~ table tr > th:nth-of-type(3) {
    display: table-cell;
  }
}

@Fedor92 · 21.10.2018, 22:28

Сообщение от Qwerty_Wasd

он имел ввиду, что понятия адаптивная верстка и responsive уже так извратили те, у кого SPA это тоже, что и лендинг, что наполняя контентом свои недоблоги, играют словами как хотят. А потом появляется армия людей трясущие этими "понятиями".

Сообщение от AlexZaw

Это не совсем то

Простая резина, да и вы сами упомянули что на мобильных может вылезти контент, особенно если колонок добавится

"Адаптация" таблиц та еще головная боль, кстати интересно, как верстальщики писем поступают в ситуации когда много колонок приходится делать?

Понятие адаптивной и отзывчивой вёрстки сильно размыты, от того каждый недоблогер пытается трактовать понятие "адаптивной" вёрстки на свой лад... Все те кто занимается проф. вёрсткой прекрасно знают кто пишет эти блоги и для чего... На самом же деле адаптировать таблицы сложно, но в некоторых случаях можно(как в моём примере) - здесь я бы заострил внимание именно на том, что понятие адаптивной вёрстки появилось после понятия таблицы и табличной вёрстки, чтобы ТС и все кто будут читать тему понимали эволюционные ступени HTML и CSS в целом... Ну а по поводу таблиц в рассылке - здесь ситуация проще... Обычно никто не заморачивается по поводу чтения писем с моб. устройств, но если стоит конкретная задача, то таблицу с большим количеством колонок проще разбить на несколько более мелких таблиц, которые при помощи резиновой вёрстки можно легко адаптировать... Или разверстать отдельно страницу с таблицей и в рассылке сделать на неё ссылку... Или же, как ещё один альтернативный вариант - снабдить письмо файлом с таблицей...

Qwerty_Wasd · 21.10.2018, 22:40

Fedor92, верстка писем до сих пор строится на таблицах, на монике с 4К разрешением и например на 13" лэптопе разница дикая. Упреждая возможный вопрос - да, иногда подрабатываю этим)

Сообщение от Fedor92

Обычно никто не заморачивается по поводу чтения писем с моб. устройств

Вы забыли маленькую, но очень важную деталь - "в русскоговорящих странах".

@Fedor92 · 21.10.2018, 22:54

Сообщение от Qwerty_Wasd

Упреждая возможный вопрос - да, иногда подрабатываю этим)

Как бы я и не собирался ничего спрашивать... Я делал время от времени рассылки с помощью mailchimp и верстал довольно большое количество различных шаблонов и не только на таблицах, как адаптивных - так и неадаптивных...

Сообщение от Qwerty_Wasd

Вы забыли маленькую, но очень важную деталь - "в русскоговорящих странах".

Вообще нет разницы... Всё зависит исключительно от запросов заказчика - вне зависимости от его гео-расположения... Мы тоже не пещерные люди и некоторые ИП относятся требовательно к рассылке по холодной базе, но их меньше всего интересует, будут письма адаптивны или нет - их прежде всего интересует выхлоп... То есть наиболее важен факт прочтения письма и конверсии - нежели удобства его прочтения... Заинтересованный в услуге пользователь прочтёт нужное письмо с любого устройства...

И да:

Сообщение от Qwerty_Wasd

верстка писем до сих пор строится на таблицах

именно поэтому большая часть рассылочных писем неадаптивна, как на Западе - так и на Востоке...

Qwerty_Wasd · 21.10.2018, 23:00

Fedor92,

Сообщение от Fedor92

важен факт прочтения письма и конверсии - нежели удобства его прочтения

я как раз сталкивался с другим подходом.

Ну да ладно... Это все не важно. Ибо правда у каждого своя

@Fedor92 · 21.10.2018, 23:17

Qwerty_Wasd, я о том и говорю, что заказчик заказчику рознь... Кто-то гонится за юзабилити, а кто-то за живыми клиентами... И по ту и по другую сторону барикад я уже успел побывать...)) И честно говоря больше не хочется...

@novichek_1905 · 22.10.2018, 11:32

Сообщение от estic

Можно как-то сделать таблицу адаптивной или хотя бы добавить к ней (а не к странице) горизонтальную прокрутку без ее оборачивания дополнительным тегом?

Довольно легко эта делается

CSS
1
2
3
4
5
6
7
8
9
10
  table {
      table-layout: fixed;
    }
 
    @media (max-width: 767px) {
      tbody {
        display: block;
        overflow-x: auto;
      }
    }

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<table border="1">
    <caption>Таблица размеров обуви</caption>
    <tbody>
      <tr>
        <th>Россия</th>
        <th>Великобритания</th>
        <th>Европа</th>
        <th>Длина ступни, см</th>
      </tr>
      <tr>
        <td>34,5</td>
        <td>3,5</td>
        <td>36</td>
        <td>23</td>
      </tr>
      <tr>
        <td>35,5</td>
        <td>4</td>
        <td>36⅔</td>
        <td>23–23,5</td>
      </tr>
      <tr>
        <td>36</td>
        <td>4,5</td>
        <td>37⅓</td>
        <td>23,5</td>
      </tr>
      <tr>
        <td>36,5</td>
        <td>5</td>
        <td>38</td>
        <td>24</td>
      </tr>
      <tr>
        <td>37</td>
        <td>5,5</td>
        <td>38⅔</td>
        <td>24,5</td>
      </tr>
      <tr>
        <td>38</td>
        <td>6</td>
        <td>39⅓</td>
        <td>25</td>
      </tr>
      <tr>
        <td>38,5</td>
        <td>6,5</td>
        <td>40</td>
        <td>25,5</td>
      </tr>
      <tr>
        <td>39</td>
        <td>7</td>
        <td>40⅔</td>
        <td>25,5–26</td>
      </tr>
      <tr>
        <td>40</td>
        <td>7,5</td>
        <td>41⅓</td>
        <td>26</td>
      </tr>
      <tr>
        <td>40,5</td>
        <td>8</td>
        <td>42</td>
        <td>26,5</td>
      </tr>
      <tr>
        <td>41</td>
        <td>8,5</td>
        <td>42⅔</td>
        <td>27</td>
      </tr>
      <tr>
        <td>42</td>
        <td>9</td>
        <td>43⅓</td>
        <td>27,5</td>
      </tr>
      <tr>
        <td>43</td>
        <td>9,5</td>
        <td>44</td>
        <td>28</td>
      </tr>
      <tr>
        <td>43,5</td>
        <td>10</td>
        <td>44⅔</td>
        <td>28–28,5</td>
      </tr>
      <tr>
        <td>44</td>
        <td>10,5</td>
        <td>45⅓</td>
        <td>28,5–29</td>
      </tr>
      <tr>
        <td>44,5</td>
        <td>11</td>
        <td>46</td>
        <td>29</td>
      </tr>
      <tr>
        <td>45</td>
        <td>11,5</td>
        <td>46⅔</td>
        <td>29,5</td>
      </tr>
      <tr>
        <td>46</td>
        <td>12</td>
        <td>47⅓</td>
        <td>30</td>
      </tr>
      <tr>
        <td>46,5</td>
        <td>12,5</td>
        <td>48</td>
        <td>30,5</td>
      </tr>
      <tr>
        <td>47</td>
        <td>13</td>
        <td>48⅔</td>
        <td>31</td>
      </tr>
      <tr>
        <td>48</td>
        <td>13,5</td>
        <td>49⅓</td>
        <td>31,5</td>
      </tr>
    </tbody>
  </table>

@Fedor92 · 22.10.2018, 13:10

Сообщение от novichek_1905

Довольно легко эта делается

Вот профессионала видно сразу, не то что мы инвалиды...

У Вас есть блог? Я хочу подписаться...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .

@estic 1310 / 1002 / 232 Регистрация: 01.10.2018 Сообщений: 3,896

	Адаптивные таблицы 21.10.2018, 12:14. Показов 3920. Ответов 29 Метки нет (Все метки) Можно как-то сделать таблицу адаптивной или хотя бы добавить к ней (а не к странице) горизонтальную прокрутку без ее оборачивания дополнительным тегом? 0

@estic 1310 / 1002 / 232 Регистрация: 01.10.2018 Сообщений: 3,896
	21.10.2018, 20:28 [ТС]
	Qwerty_Wasd, из контекста можно было понять, что речь идет об адаптации под небольшую (минимальную) ширину. Я имел в виду то, что написал. Если вам незнакомо понятие "адаптивная таблица", прошу не отвечать в теме. Для большого количества столбцов обычная "резина" не подходит. И, видимо, вы не до конца уловили суть вопроса. Вопрос касался не адаптации под какие-то конкретные размеры и т.п. Меня интересует, можно ли делать адаптацию без оборачивания тега TABLE и если да, то как. Добавлено через 10 минут Видимо, можно. Вот нашел кое-что: https://codepen.io/sanagl/pen/WMweeP - кто-нибудь может прокомментировать это решение или предложить свое? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	21.10.2018, 20:30
	estic, вариантов несколько... Либо Вы задаёте размеры таблицы, включая ячейки в процентах(но может вылезти контент на мобилах) - либо верстаете таблицу на дивах, для десктопа на брекпойнтах задаёте табличные свойства для блоков - display:table/display:table-cell, а на мобильных устройствах выставляете значение disply:block? чтобы они выстраивались вертикально... 1

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	21.10.2018, 23:17
	Qwerty_Wasd, я о том и говорю, что заказчик заказчику рознь... Кто-то гонится за юзабилити, а кто-то за живыми клиентами... И по ту и по другую сторону барикад я уже успел побывать...)) И честно говоря больше не хочется... 1