使用HTML和CSS在表格中进行绝对定位

loading...


0

我有这样的表:

而且我正在努力根据我的需要定位它,即使 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>

loading...

0回答

No Data

评论

暂时没有评论!