Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
6 / 6 / 1
Регистрация: 04.01.2017
Сообщений: 461
1

Как зафиксировать 1-ую строку у нескольких таблиц на странице средствами html и css?

11.06.2020, 21:43. Показов 301. Ответов 0

Здравствуйте!

У меня на странице несколько таблиц. Пытаюсь средствами html и css у каждой зафиксировать 1-ую строку (заголовок).

HTML5
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
<head>
    <title>Главная страница</title>
    <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>
<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>
                <td>${flood.date}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<div class="container">
        <table class="container">
            <thead>
            <tr class="tr">
                <th>Координаты</th>
                <th>Населённый пункт</th>
                <th>Дата</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${listChangeFlood}" var="ChangeFlood">
                <tr>
                    <td class="geo">${ChangeFlood.geographKoordsPost}</td>
                    <td class="city">${ChangeFlood.nameLocality}</td>
                    <td>${ChangeFlood.date}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
Возникают 2-е проблемы:
1) ширина ячеек в 1-ой фиксированной строке не совпадает с шириной ячеек основной части таблицы;
2)у остальных таблиц 1-ая строка вообще пропадает.

Подскажите пожалуйста как это исправить.

Добавлено через 1 час 0 минут
HTML5
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
<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>
                <td>${flood.date}</td>
            </tr>
            </c:forEach>
        </tbody>
    </table>
</div>
<div class="container">
        <table class="container">
            <thead>
            <tr class="tr">
                <th>Координаты</th>
                <th>Населённый пункт</th>
                <th>Дата</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${listChangeFlood}" var="ChangeFlood">
                <tr>
                    <td class="geo">${ChangeFlood.geographKoordsPost}</td>
                    <td class="city">${ChangeFlood.nameLocality}</td>
                    <td>${ChangeFlood.date}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</body>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
11.06.2020, 21:43
Ответы с готовыми решениями:

Как зафиксировать блоки таблицы HTML / CSS ?
Здравствуйте. Делаю небольшой сайт-визитку и в процессе создания столкнулся со следующей...

Зафиксировать меню средствами CSS
Возможно ли фиксировать меню только средствами CSS? Т.е. сверху банер, потом меню и надо чтобы...

Как адаптировать картинку с помощью бутстраповской сетки или средствами HTML/CSS
Не знаю как адаптировать картинку в шапке сайта. Уже брал проект,где вообще медиазапросы...

Как правильно подключить JS-скрипты и CSS-стили к HTML странице
Доброго времени суток уважаемые! Я к Вам попал из соседней ветки (Delphi). Сразу скажу, с HTML...

0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
11.06.2020, 21:43

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Опрос средствами HTML, CSS и JS
Всем добрый вечер. По практике в универе пишу сайт и дошел до такого задания: Создать...

Стили для нескольких таблиц на странице
Подскажите, пожалуйста, можно ли добиться кроссплатформенности? Нормальное отображение только в...

Закругленные уголки рамок средствами html и CSS.
Всем, доброго времени суток! Хотел бы спросить, как мне сделать закругленные уголки рамок...

Возможно ли сделать плашку общей средствами html/css
Приветствую уважаемые форумчане! Подскажите пожалуйста, возможно ли как-то убрать верхнюю полосу в...

Можно ли средствами html/css сделать текст вертикальным
Дизайнер нарисовал, а заказчик утвердил макет сайта с вертикально ориентированными ценниками (т.е....

Как зафиксировать iframe на странице?
Здравствуйте. Я новичок в вебпрограммировании. Совсем недавно начала изучать html и css. Прошу...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.