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

Question

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

<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>
                    <td class="geo">${ChangeFlood.geographKoordsPost}</td>
                    <td class="city">${ChangeFlood.nameLocality}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</body>

Возникают 2-е проблемы:

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

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

БЛОГ НА HUSL

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

Ответы (0 шт):