Гость
Войти | Профиль | Очистить
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / HTML таблица rowspan colspan / 11 сообщений из 11, страница 1 из 1
04.03.2021, 09:18
    #40050540
Valeriu
Valeriu
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HTML таблица rowspan colspan
Доброго дня всем.

Имеется таблица со сложной шапкой.
Данных в нее не помещаются на одной страницы
Никак не получается фиксировать шапку при скроле..
У меня мало опыта в этом. Может кто поможет.
Буду очень признателен.
Шапка:
 
Код: 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, 11:28
    #40050586
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HTML таблица rowspan colspan
Valeriu , посмотри тут примеры , может чего подойдет тебе
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.03.2021, 11:30
    #40050587
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HTML таблица rowspan colspan
Тут вот со скриптами делают...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.03.2021, 13:59
    #40050642
fkthat
fkthat
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HTML таблица rowspan colspan
Можно как-то так:

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

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


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


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

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

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

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

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

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


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