我有这样的表:
而且我正在努力根据我的需要定位它,即使 Person
collumn绝对到表,但相对于整个页面 - 我的意思是页面可以滚动,取决于人数,但它应该留在原地当水平滚动时 - 可能有多达52周,我想要实现的结果是始终将此 Person
列和滚动条适用于其余列 . 我不想使用jQuery,只有HTML CSS解决方案才有效 . 我自己定位时遇到了问题 - 我设法实现的最接近的事情就是在页面后面放错了 Person
列,因为它正在滚动,有一些延迟 - 我不得不将鼠标指针悬停在此列上以便移动它 . 我的HTML:
.main-page {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-top: 30px;
}
table {
width: 750px;
border-collapse: collapse;
}
<div layout-align="center" class="page">
<div md-whiteframe="5" flex="60" layout layout-align="center center">
<div class="container">
<div class="container-title" style="text-align: center;"><p>Grades</p></div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th rowspan="2">Person</th>
<th class="sprint-header">wk 1</th>
<th class="sprint-header">wk 2</th>
<th class="sprint-header">wk 3</th>
<th class="sprint-header">wk 4</th>
<th class="sprint-header">wk 5</th>
<th class="sprint-header">wk 6</th>
<th class="sprint-header">wk 7</th>
<th class="sprint-header">wk 8</th>
<th class="sprint-header">wk 9</th>
<th class="sprint-header">wk 10</th>
<th class="sprint-header">wk 11</th>
<th class="sprint-header">wk 12</th>
<th class="sprint-header">wk 13</th>
<th class="sprint-header">wk 14</th>
<th class="sprint-header">wk 15</th>
<th class="sprint-header">wk 16</th>
<th class="sprint-header">wk 17</th>
<th class="sprint-header">wk 18</th>
<th class="sprint-header">wk 19</th>
<th class="sprint-header">wk 20</th>
<th class="sprint-header">wk 21</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amy</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr><td>Jane</td></tr>
<tr><td>Paul</td></tr>
<tr><td>Chris</td></tr>
<tr><td>John</td></tr>
<tr><td>Dom</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>