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

У меня на странице несколько таблиц. Пытаюсь средствами html и css у каждой зафиксировать 1-ую строку (заголовок).
Код: 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.
<head>
    <style>   
        table {table-layout: fixed;width:98%; height: 250px; margin-top: 16px; border: black; }
        .tr{background: cornflowerblue; color: white; text-align: center; vertical-align: center; horiz-align: center; position:fixed;}
        .tr_tbody{text-align: center; vertical-align: center; horiz-align: center;}
        td {word-wrap:break-word; text-align-all: center; border: black; align: center;}
        .container {
            height: 250px;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div>
    <table>
       <thead>
        <tr class="tr">
            <td>Координаты</td>
            <td>Населённый пункт</td>
        </tr>
       </thead>
    </table>
</div>
<div class="container">
    <table>
        <tbody>
            <c:forEach items="${listFlood}" var="flood">
            <tr class="tr_tbody">
                <td class="geo">${flood.geographKoordsPost}</td>
                <td class="city">${flood.nameLocality}</td>
            </tr>
            </c:forEach>
        </tbody>
    </table>
</div>
<div class="container">
        <table class="container">
            <thead>
            <tr class="tr">
                <th>Координаты</th>
                <th>Населённый пункт</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${listChangeFlood}" var="ChangeFlood">
                <tr class="tr_body">
                    <td class="geo">${ChangeFlood.geographKoordsPost}</td>
                    <td class="city">${ChangeFlood.nameLocality}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</body>



Возникают 2-е проблемы:
1) ширина ячеек в 1-ой фиксированной строке не совпадает с шириной ячеек основной части таблицы;
2) у остальных таблиц 1-ая строка вообще пропадает.

Подскажите пожалуйста как это можно исправить.
...
Рейтинг: 0 / 0
14.06.2020, 11:09
| Ответить | Цитировать | Написать  
Как зафиксировать 1-ую строку у нескольких таблиц на странице средствами html и css?
    #39969182
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Vlad__i__mir , пробуй так...
https://snipp.ru/jquery/fix-head-table
...
Рейтинг: 0 / 0
15.06.2020, 07:29
| Ответить | Цитировать | Написать  
Как зафиксировать 1-ую строку у нескольких таблиц на странице средствами html и css?
    #39970442
Vlad__i__mir
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vlad__i__mir
Гость
krvsa
Vlad__i__mir , пробуй так...
https://snipp.ru/jquery/fix-head-table


Спасибо! Буду пробовать.
...
Рейтинг: 0 / 0
18.06.2020, 07:31
| Ответить | Цитировать | Написать  
Как зафиксировать 1-ую строку у нескольких таблиц на странице средствами html и css?
    #39970467
Алексей Роза
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Роза
Гость
так то нету смысла прятать только тело таблицы
прячьте всё.
...
Рейтинг: 0 / 0
18.06.2020, 10:49
| Ответить | Цитировать | Написать  
Как зафиксировать 1-ую строку у нескольких таблиц на странице средствами html и css?
    #39970529
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Алексей Роза
так то нету смысла прятать только тело таблицы
прячьте всё.
причём тут прятать?
когда таблица длинная - неплохо не терять названия столбцов
такое даже в экселе есть
...
Рейтинг: 0 / 0
18.06.2020, 14:14
| Ответить | Цитировать | Написать  
Как зафиксировать 1-ую строку у нескольких таблиц на странице средствами html и css?
    #39970594
Алексей Роза
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Роза
Гость
ну да, скроллить
вот так это правильно делается
 
Код: 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.
<!doctype html>
<html>
<head>
<style>
.tbl1 thead, .tbl1 tbody {display:block;}
.tbl1 tbody {overflow:scroll; overflow-y:auto; overflow-x:hidden; height:50px;}
</style>
</head>

<body>
<table class='tbl1'>
<thead>
<tr class='tr1'>
<td>tab1</td>
<td>tatiuajgiuruger2</td>
<td>tab333333</td>
</tr>
</thead>

<tbody>
<tr>
<td>gg</td>
<td>2233</td>
<td>g</td>
</tr>

<tr>
<td>gg</td>
<td>2233</td>
<td>g</td>
</tr>

<tr>
<td>gg</td>
<td>2233</td>
<td>g</td>
</tr>

<tr>
<td>gg</td>
<td>2233</td>
<td>g</td>
</tr>

<tr>
<td>gg</td>
<td>2233</td>
<td>g</td>
</tr>
</tbody>

</table>

</body>
</html>

...
Рейтинг: 0 / 0
18.06.2020, 17:24
| Ответить | Цитировать | Написать  
Как зафиксировать 1-ую строку у нескольких таблиц на странице средствами html и css?
    #39971213
Vlad__i__mir
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vlad__i__mir
Гость
Алексей Роза
ну да, скроллить
вот так это правильно делается


В этом случае остается проблема с несовпадением ширины ячеек заголовка и основной части. Попытался решить это, путем добавления в ваш вариант фиксированной ширины, но это не сработало:
Код: html
1.
2.
3.
4.
5.
6.
<style>
        .tbl1 thead, .tbl1 tbody {display:block;}
        .tbl1 tbody {overflow:scroll; overflow-y:auto; overflow-x:hidden; height:50px;}
		.tbl1 th{width:30px;}
		.tbl1 td{width:30px;}
    </style>



Ведать без jQwery не обойтись (
...
Рейтинг: 0 / 0
20.06.2020, 13:04
| Ответить | Цитировать | Написать  
Как зафиксировать 1-ую строку у нескольких таблиц на странице средствами html и css?
    #39971217
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Vlad__i__mir,

22097322
...
Рейтинг: 0 / 0
20.06.2020, 13:18
| Ответить | Цитировать | Написать  
Как зафиксировать 1-ую строку у нескольких таблиц на странице средствами html и css?
    #39971235
Алексей Роза
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Роза
Гость
Vlad__i__mir
В этом случае остается проблема с несовпадением ширины ячеек заголовка и основной части.

в моём варианте нет такой проблемы.
у вас такая проблема была (совершенно закономерно), потому что было 2 таблицы. Это всегда гемор.
пляшите от моего варианта и будет вам счастье.
...
Рейтинг: 0 / 0
20.06.2020, 15:01
| Ответить | Цитировать | Написать  
Как зафиксировать 1-ую строку у нескольких таблиц на странице средствами html и css?
    #39971238
Vlad__i__mir
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vlad__i__mir
Гость
Алексей Роза
Vlad__i__mir
В этом случае остается проблема с несовпадением ширины ячеек заголовка и основной части.

в моём варианте нет такой проблемы.
у вас такая проблема была (совершенно закономерно), потому что было 2 таблицы. Это всегда гемор.
пляшите от моего варианта и будет вам счастье.


Запустил ваш вариант, ширина столбцов шпки и тела не совпадают. И у меня также
...
Рейтинг: 0 / 0
20.06.2020, 15:10
| Ответить | Цитировать | Написать  
Как зафиксировать 1-ую строку у нескольких таблиц на странице средствами html и css?
    #39971250
Vlad__i__mir
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vlad__i__mir
Гость
вадя
Vlad__i__mir,

22097322


Спасибо большое! Этот вариант сработал.
...
Рейтинг: 0 / 0
20.06.2020, 15:42
| Ответить | Цитировать | Написать  
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как зафиксировать 1-ую строку у нескольких таблиц на странице средствами html и css?
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=39970594&tid=1443437]:
 0ms
get settings:
 10ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 56ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 58ms
get tp. blocked users:
 2ms
others: 15ms
total:  179ms
созд. / загр.: 179ms
x
x
Закрыть


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