У меня есть таблица, как показано ниже, с первой строкой внутри tbody , содержащей заголовок столбца (я делаю это так, чтобы ширина столбца соответствовала ширине ячеек td)
I хочу сделать первую строку, row-header , чтобы она плавала в верхней части таблицы, не нарушая ширину столбцов.
позиция абсолют и sticky не работает.
.rdp-table {
text-align: left;
background-color: #fff;
border-collapse: collapse;
margin: 0 auto;
overflow: scroll;
}
.rdp-table tbody {
max-height: 600px;
overflow-y: scroll;
}
.rdp-table tr {
border: 1px solid #ccc;
}
.rdp-table tr:hover {
background-color: #f5f5f5;
}
.rdp-table th,
.rdp-table td {
font-weight: 600;
line-height: 24px;
border: 1px solid #cecece;
min-width: 128px;
text-align: center;
}
.rdp-table th {
text-align: center;
color: black;
text-transform: uppercase;
}
<table id="table" class="rdp-table">
<tbody>
<tr class="row-header">
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
</tr>
<tr>
<td>Some really looong looong text that takes the whole table</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Some really looong looong text that takes the whole table</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
<tr>
<td>Some really looong looong text that takes the whole table</td>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
</tr>
</tbody>
</table>