Фиксировать шапку таблицы и первый столбец / HTML, JavaScript, VBScript, CSS

ReSQL.ru

2.0.59

Полная версия Контакт Правила FAQ Помощь

Гость

Войти | Профиль | Очистить

Нов. | Гор. | Избр.

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Действия ...

Доб. в избранное
Игнор. тему
Прикреп. тему
Пометить прочит. / непрочит.
Фильтр:
Сообщения автора темы
Сообщение содержит вложения
Сообщение содержит картинки
Сообщение содержит видеоклипы
Сообщение содержит аудиоклипы
Сообщение содержит картинки или видео 18+

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Фиксировать шапку таблицы и первый столбец / 6 сообщений из 6, страница 1 из 1

14.02.2019, 17:28

#39773979

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

<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:33

#39773983

вадя

Участник

Откуда: Екатеринбург
Сообщения: 19 399
Рейтинг: 0 / 0

Фиксировать шапку таблицы и первый столбец

dimyaz,
надо задавать ширину ячеек в thead и в tbody

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

15.02.2019, 08:49

#39774214

dimyaz

Гость

Фиксировать шапку таблицы и первый столбец

вадяdimyaz,
надо задавать ширину ячеек в thead и в tbody

делал так, но из-за того что есть кнопки шапке, ширина не фиксируется нормально.

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

15.02.2019, 10:40

#39774274

вадя

Участник

Откуда: Екатеринбург
Сообщения: 19 399
Рейтинг: 0 / 0

Фиксировать шапку таблицы и первый столбец

dimyazделал так, но из-за того что есть кнопки шапке, ширина не фиксируется нормально.дак чем это может помешать?

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

15.02.2019, 15:35

#39774590

dimyaz

Гость

Фиксировать шапку таблицы и первый столбец

вадя,

в общем получилось все сделать с
position: sticky;

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

16.02.2019, 08:49

#39774821

MaratIsk

Участник

Откуда: Almaty, Kazakhstan
Сообщения: 2 520
Рейтинг: 0 / 0

Фиксировать шапку таблицы и первый столбец

dimyaz,
покажи код

...

Рейтинг:

0 / 0

| Ответить | Цитировать | Написать

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&tablet=1&tid=1443871]:	0ms
get settings:	9ms
get forum list:	11ms
check forum access:	3ms
check topic access:	3ms
track hit:	152ms
get topic data:	12ms
get forum data:	2ms
get page messages:	47ms
get tp. blocked users:	2ms
others:	256ms

total:	497ms