Я пытаюсь сделать таблицу липкой как в первом ряду, так и в первом столбце. Но я не могу заставить thead придерживаться, когда это прокручивается. Я нахожусь на ioni c 3. Я перепробовал много вещей и почти все связанные учебники по inte rnet, но я не могу закончить sh это, я думаю, это потому, что какое-то совпадение с вертикалью свиток Кто знает как за этим следить? Кто-нибудь знает, как получить его, используя CSS?
th,td {
padding: 0.25rem;
}
th {
background: white;
position: sticky;
top: 0;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
.zui-table {
border: none;
border-collapse: separate;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
border: none;
color: rgb(0, 0, 0);
padding: 10px;
text-align: left;
white-space: nowrap;
}
.zui-table tbody td {
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.zui-wrapper {
position: relative;
}
.zui-scroller {
margin-left: 48.9vw;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 40vw;
}
.zui-table .zui-sticky-col {
background: rgb(255, 255, 255);
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 72%, rgba(213, 213, 213, 1) 72%, rgba(255, 255, 255, 1) 100%);
left: 0;
position: absolute;
top: auto;
width: 53%;
}
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="zui-table" id="header-fixed" id="header-fixed">
<thead style="position: sticky;" id="demo">
<tr class="red">
<th class="zui-sticky-col" style="color: black; background-color: rgb(167, 167, 167)!important">Name</th>
<th>Number</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Prior to NBA/Country</th>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">DeMarcus Cousins</td>
<td>15</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
<td>Kentucky/USA</td>
</tr>
</tbody>
</table>
</div>
</div>