ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Фиксировать шапку таблицы и первый столбец
6 сообщений из 6, страница 1 из 1
Фиксировать шапку таблицы и первый столбец
    #39773979
dimyaz
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dimyaz
Гость
Наверное уже очень заезженная тема, много топиков есть, но подходящий ответ так и не смог найти.
Подтолкните кто знает:

Есть огромная таблица, которая генерируется приложением.
Поэтому в самой структуре страницы ничего написать не получиться. Но можно проставлять классы и idшники на нужные объекты.
А так же подгружать нужные css и js скрипты.

У кого нибудь есть подходящий css, чтобы через него можно было зафиксить шапку и первый столбец?

Нашел хорошее и простое решение.
Оно в принципе работает правильно для малого кол-ва столбцов, но когда таблица имеет 30-40 столбцов, то заголовок начинает плавать и не совпадать со столбцами. Где здесь ошибка?

Нормальный кейс:
Код: 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.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
<html>                                                                  
<head>      
 <style>
.table-fixed-head {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  height: 100vh;
}

.table-fixed-head th,
.table-fixed-head td {
  padding: 5px;
  text-align: center;
  width: 33.333vw;
}

.table-fixed-head thead {
  background-color: #333;
  color: #FDFDFD;
}

.table-fixed-head thead tr {
  display: block;
  position: relative;
}

.table-fixed-head tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: calc(100vh - 30px);
}

.table-fixed-head tbody tr:nth-child(even) {
  background-color: #DDD;
}
</style>               
</script>                                                        
</head>                                                                 

<table class="table-fixed-head">
  <thead>
    <tr>
      <th>Title 1</th>
      <th>Title 2</th>
      <th>Title 3</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

          
</body>
</html>



И ВОТ МОЙ не нормальный кейс:
Код: 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.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
<html>                                                                  
<head>      
 <style>
.table-fixed-head {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  height: 100vh;
}

.table-fixed-head th,
.table-fixed-head td {
  padding: 5px;
  text-align: center;
  width: 33.333vw;
}

.table-fixed-head thead {
  background-color: #333;
  color: #FDFDFD;
}

.table-fixed-head thead tr {
  display: block;
  position: relative;
}

.table-fixed-head tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: calc(100vh - 30px);
}

.table-fixed-head tbody tr:nth-child(even) {
  background-color: #DDD;
}
</style>               
</script>                                                        
</head>                                                                 

<table class="table-fixed-head">
  <thead>
    <tr>
      <th>Title 1</th>
      <th>Title 2</th>
      <th>Title 3</th>
      <th>Title 4</th>
      <th>Title 3</th>
      <th>много много много много много много много много много много много текста</th>
      <th>Title 3</th>
      <th>много много много много много текста</th>
      <th>Title 3</th>
      <th>Title 3</th>
      <th>Title 3</th>
      <th>Здесь представлены разные таблицы и ситуации. Но функция для фиксирования заголовков/столбцов универсальная. <button onclick="FixAction(this)">большая кнопка</button></th>
      <th>Title 3</th>
      <th>много много много много много много много много много много много текста</th>
      <th>Title 3</th>
      <th>много много много много много текста</th>
      <th>Title 3</th>
      <th>Title 3</th>
      <th>много много много много много много много много много много много текста</th>
      <th>Title 3</th>
      <th>много много много много много текста</th>
      <th>Здесь представлены разные таблицы и ситуации. Но функция для фиксирования заголовков/столбцов универсальная. <button onclick="FixAction(this)">большая кнопка</button></th>
      <th>Title 3</th>
      <th>Title 3</th>
      <th>Title 4</th>
      <th>Title 3</th>
      <th>много много много много много много много много много много много текста</th>
      <th>Title 3</th>
      <th>много много много много много текста</th>
      <th>Здесь представлены разные таблицы и ситуации. Но функция для фиксирования заголовков/столбцов универсальная. <button onclick="FixAction(this)">большая кнопка</button></th>
      <th>Title 3</th>
      <th>много много много много много много много много много много много текста</th>
      <th>Title 3</th>
      <th>много много много много много текста</th>
      <th>Title 3</th>
      <th>Title 3</th>
      <th>Title 3</th>
      <th>Здесь представлены разные таблицы и ситуации. Но функция для фиксирования заголовков/столбцов универсальная. <button onclick="test(this)">большая кнопка</button></th>
      <th>Title 3</th>
      <th>много много много много много много много много много много много текста</th>
      <th>Title 3</th>
      <th>много много много много много текста</th>
      <th>Title 3</th>
      <th>Title 3</th>	  
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>много много много много много много много много много много много текста</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>	  
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>
      <td>много много много много много текста</td>
      <td>3</td>	  
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>много много много много много текста</td>
      <td>2</td>
      <td>много много много много много текста</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

          
</body>
</html>
...
Рейтинг: 0 / 0
14.02.2019, 17:28
| Ответить | Цитировать | Написать  
Фиксировать шапку таблицы и первый столбец
    #39773983
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
dimyaz,
надо задавать ширину ячеек в thead и в tbody
...
Рейтинг: 0 / 0
14.02.2019, 17:33
| Ответить | Цитировать | Написать  
Фиксировать шапку таблицы и первый столбец
    #39774214
dimyaz
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dimyaz
Гость
вадяdimyaz,
надо задавать ширину ячеек в thead и в tbody

делал так, но из-за того что есть кнопки шапке, ширина не фиксируется нормально.
...
Рейтинг: 0 / 0
15.02.2019, 08:49
| Ответить | Цитировать | Написать  
Фиксировать шапку таблицы и первый столбец
    #39774274
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
dimyazделал так, но из-за того что есть кнопки шапке, ширина не фиксируется нормально.дак чем это может помешать?
...
Рейтинг: 0 / 0
15.02.2019, 10:40
| Ответить | Цитировать | Написать  
Фиксировать шапку таблицы и первый столбец
    #39774590
dimyaz
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dimyaz
Гость
вадя,

в общем получилось все сделать с
position: sticky;
...
Рейтинг: 0 / 0
15.02.2019, 15:35
| Ответить | Цитировать | Написать  
Фиксировать шапку таблицы и первый столбец
    #39774821
MaratIsk
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
MaratIsk
Участник
dimyaz,
покажи код
...
Рейтинг: 0 / 0
16.02.2019, 08:49
| Ответить | Цитировать | Написать  
6 сообщений из 6, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Фиксировать шапку таблицы и первый столбец
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39774274&tid=1443871]:
 0ms
get settings:
 10ms
get forum list:
 12ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 66ms
get topic data:
 12ms
get forum data:
 2ms
get page messages:
 50ms
get tp. blocked users:
 2ms
others: 238ms
total:  400ms
созд. / загр.: 400ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]