Здравствуйте!
У меня на странице несколько таблиц. Пытаюсь средствами html и css у каждой зафиксировать 1-ую строку (заголовок).
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-ая строка вообще пропадает.
Подскажите пожалуйста как это можно исправить.
