ReSQL.ru
     
powered by simpleCommunicator - 2.0.49     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / HTML таблица rowspan colspan
11 сообщений из 11, страница 1 из 1
HTML таблица rowspan colspan
    #40050540
Valeriu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Valeriu
Участник
Доброго дня всем.

Имеется таблица со сложной шапкой.
Данных в нее не помещаются на одной страницы
Никак не получается фиксировать шапку при скроле..
У меня мало опыта в этом. Может кто поможет.
Буду очень признателен.
Шапка:
 
Код: 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.
<div class="col-sm-12" style="background-color:#ecf0f7 ; height:80vh; border:1px solid black;">
        <div class="row">
          <div style="height:80vh; width:100%; overflow:scroll">
            <table width="100%" id="tabledispecer" class="pretty-table">
              <thead class="thead-light"></thead>
              <tr>
                <th class="text-center" rowspan="3">Data</th>
                <th class="text-center" rowspan="3">Ruta</th>
                <th class="text-center" colspan="8" rowspan="2">Emiterea &#238;n orele de control</th>
                <th class="text-center" colspan="14">Curse neefectuate</th>
                <th class="text-center" colspan="2" rowspan="2">Curse efectuate</th>
                <th class="text-center" rowspan="3">Prc%</th>
                <th class="text-center" colspan="2" rowspan="2">Venit (Incasari)</th>
              </tr>
              <tr>
                <th class="text-center" colspan="6">Vina RTE</th>
                <th class="text-center" colspan="7">Vina municipiului/Forta majora</th>
                <th class="text-center" rowspan="2">Tot</th>
              </tr>
              <tr>
                <th>8.00</th>
                <th>+-</th>
                <th>12.00</th>
                <th>+-</th>
                <th>17.00</th>
                <th>+/-</th>
                <th>22.00</th>
                <th>+-</th>
                <th>Teh</th>
                <th>Exp</th>
                <th>AcR</th>
                <th>RC</th>
                <th>Alt</th>
                <th>Tot</th>
                <th>Amb</th>
                <th>AcR</th>
                <th>Mnf</th>
                <th>Dcn</th>
                <th>F/m</th>
                <th>Alt</th>
                <th>Tot</th>
                <th class="text-center">Plan</th>
                <th class="text-center">Fact</th>
                <th class="text-center">Totaluri</th>
                <th class="text-center">Per/Trol</th>
              </tr>
              <tbody>
              </tbody>
            </table>
          </div>
        </div>
      </div>

...
Рейтинг: 0 / 0
04.03.2021, 09:18
| Ответить | Цитировать | Написать  
HTML таблица rowspan colspan
    #40050586
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Valeriu , посмотри тут примеры , может чего подойдет тебе
...
Рейтинг: 0 / 0
04.03.2021, 11:28
| Ответить | Цитировать | Написать  
HTML таблица rowspan colspan
    #40050587
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Тут вот со скриптами делают...
...
Рейтинг: 0 / 0
04.03.2021, 11:30
| Ответить | Цитировать | Написать  
HTML таблица rowspan colspan
    #40050642
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fkthat
Участник
Можно как-то так:

Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
thead {
    display: block;
}

tbody {
    display: block;
    overflow: auto;
    height: ...;
}


Только тогда еще придется ширину всех столбцов явно указывать, иначе может поплыть.
...
Рейтинг: 0 / 0
04.03.2021, 13:59
| Ответить | Цитировать | Написать  
HTML таблица rowspan colspan
    #40050717
Valeriu
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Valeriu
Участник
Я перелопатил интернет вдоль и поперек.
Примеров куча для таблицы с шапкой из одной строки.
Вопросов нет - здесь все как надо.
Как только доходит для сложной шапки, начинаются танцы с бубном.
Я пробовал запихать в навигационную панель. Получается что шапка не двигается
но опять как подгонять ширину ячеек ... У меня ВСЕ в динамике. Я никак не могу
предполагать что придет от сервера
Код: html
1.
2.
3.
<nav class="navbar navbar-light">
 ....
</nav>


Есть резон, но есть нюансы, которые мне не подходят.
...
Рейтинг: 0 / 0
04.03.2021, 15:48
| Ответить | Цитировать | Написать  
HTML таблица rowspan colspan
    #40050820
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Valeriu,

ты бы показал варианты шапок
...
Рейтинг: 0 / 0
04.03.2021, 18:20
| Ответить | Цитировать | Написать  
HTML таблица rowspan colspan
    #40050885
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
вадя
Valeriu,

ты бы показал варианты шапок

В первом посте есть вариант
...
Рейтинг: 0 / 0
04.03.2021, 22:36
| Ответить | Цитировать | Написать  
HTML таблица rowspan colspan
    #40050900
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
Такой вариант посмотри

Код: 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.
<style>

td, th {
	border: 1px solid black;
}

table {
  border-spacing: 0;
	border-collapse: collapse;
}
table>thead th{
  background-color: #ecf0f7;
}
table>thead tr{
  background-color: #ecf0f7;
}
table>thead{
  background-color: #ecf0f7;
}

</style>
<body>
<div class="col-sm-12" style="background-color:#ecf0f7 ; height:80vh; border:1px solid black;">
        <div class="row" style="position:relative;">
          <div style="height:80vh; width:100%; overflow:scroll; ">
            <table width="100%" id="tabledispecer" class="pretty-table">
              <thead class="thead-light">
              <tr>
                <th class="text-center" rowspan="3">Data</th>
                <th class="text-center" rowspan="3">Ruta</th>
                <th class="text-center" colspan="8" rowspan="2">Emiterea &#238;n orele de control</th>
                <th class="text-center" colspan="14">Curse neefectuate</th>
                <th class="text-center" colspan="2" rowspan="2">Curse efectuate</th>
                <th class="text-center" rowspan="3">Prc%</th>
                <th class="text-center" colspan="2" rowspan="2">Venit (Incasari)</th>
              </tr>
              <tr>
                <th class="text-center" colspan="6">Vina RTE</th>
                <th class="text-center" colspan="7">Vina municipiului/Forta majora</th>
                <th class="text-center" rowspan="2">Tot</th>
              </tr>
              <tr>
                <th>8.00</th>
                <th>+-</th>
                <th>12.00</th>
                <th>+-</th>
                <th>17.00</th>
                <th>+/-</th>
                <th>22.00</th>
                <th>+-</th>
                <th>Teh</th>
                <th>Exp</th>
                <th>AcR</th>
                <th>RC</th>
                <th>Alt</th>
                <th>Tot</th>
                <th>Amb</th>
                <th>AcR</th>
                <th>Mnf</th>
                <th>Dcn</th>
                <th>F/m</th>
                <th>Alt</th>
                <th>Tot</th>
                <th class="text-center">Plan</th>
                <th class="text-center">Fact</th>
                <th class="text-center">Totaluri</th>
                <th class="text-center">Per/Trol</th>
              </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
            
          </div>
             <table id="tabledispecera" class="pretty-table" style='position:absolute;top:0;left:0;right:0' hidden>
              <thead class="thead-light">
              </thead>
             </table>
            
       </div>
      </div>

<script>
let tbl = document.getElementById ('tabledispecer')
let tbla = document.getElementById ('tabledispecera')

// формируем в теле таблицы 100 строк, что бы было интереснее
let tbd = tbl.tBodies[0];
let sr1 = `
<tr><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td>
<td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td>
<td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td>
<td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td>
<td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td>
</tr>
`;
tbd.innerHTML = sr1.repeat(100);


function stickyHead () {
	tbla.tHead.innerHTML = tbl.tHead.innerHTML
	resizeth ()
	tbla.hidden = false;
}

function resizeth () {
	let tbh = tbl.tHead.querySelectorAll('th')
	let tbha = tbla.tHead.querySelectorAll('th')
	for (let i=0; i< tbh.length; i++) {
		let w = getComputedStyle(tbh[i]).width;
		tbha[i].style.width=w
	}
}

const resizeObserver = new ResizeObserver(entries => {
	tbla.style.right = 0;
	resizeth ()
})

resizeObserver.observe(tbl);
stickyHead ()
</script>
</body>



Там надо еще поработать со стилями, т.к. идет сбой, когда окно становится узким и появляется горизонтальный скролл.
Но принцип такой.
...
Рейтинг: 0 / 0
04.03.2021, 23:38
| Ответить | Цитировать | Написать  
HTML таблица rowspan colspan
    #40050908
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fkthat
Участник
Если честно, то на мой вкус сами такие идеи для web UX это гамно. Ну не нужно тянуть в веб шаблоны UI из дельфовских форм. Больше чем контент, который скроллится отдельно от страницы бесит, наверное, только "бесконечный скролл", наподобии ленты вконтакта. Большая таблица не помещается - делай тогда обычный пейджинг, как все люди.
...
Рейтинг: 0 / 0
05.03.2021, 00:56
| Ответить | Цитировать | Написать  
HTML таблица rowspan colspan
    #40051151
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
voraa
В первом посте есть вариант
парсить html в голове - лень,
ведь есть https://jsfiddle.net/
наглядно и есть возможность править
...
Рейтинг: 0 / 0
05.03.2021, 18:16
| Ответить | Цитировать | Написать  
HTML таблица rowspan colspan
    #40051521
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLPowerUser
Участник
Valeriu,

давно на форуме была фиксированная таблица 17822310
Примеры хорошие, но в реальности немного доработать напильником :)
...
Рейтинг: 0 / 0
08.03.2021, 10:04
| Ответить | Цитировать | Написать  
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / HTML таблица rowspan colspan
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=5&tid=1443286]:
 0ms
get settings:
 11ms
get forum list:
 16ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 46ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 55ms
get tp. blocked users:
 2ms
others: 240ms
total:  392ms
созд. / загр.: 392ms
x
x
Закрыть


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