当您现在水平滚动时,第一列必须留在页面上,但是如何使内容位于其后,从该列旁边而不是其下方开始?当我尝试执行此操作时,在水平滚动时不会跟随第一列。
我的下一个问题是,如何使水平滚动条对用户可见,因为现在它位于div的底部,但是必须一直可见。
.TestRFloatL {
position: absolute;
width: 300px;
left: 0;
background-color: #114A7A;
}
.outer {
position: relative;
}
.inner {
overflow-x: scroll;
overflow-y: visible;
}
#testjobTable {
margin: auto;
border-collapse: collapse;
table-layout: fixed;
border: 0px solid black;
}
#testjobTable td {
text-align: left;
/* padding: 2px; */
border: 1px solid white;
}
#testjobTable img {
width: 20px;
/*30% var den før Week 40*/
height: auto;
}
/*table descriptions*/
#header {
background-color: #114A7A;
color: white;
width: 100%;
}
#testjobTable th {
text-align: left;
}
#testjobTable th:nth-child(1) {
width: 300px;
}
#testjobTable td:hover {
background-color: #EFF0F1;
}
#testjobTable tr:nth-child(2n) {
background-color: #DDDDDD;
}
#testjobTable td {
/* padding: 1px; */
border: 0px solid white;
border-collapse: collapse;
<div class="outer">
<div class="inner">
<table id='testjobTable'>
<tr id='header'>
<th class="TestRFloatL">Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
<th>Col8</th>
<th>Col9</th>
<th>Col10</th>
<th>Col11</th>
<th>Col12</th>
<th>Col13</th>
<th>Col14</th>
<th>Col15</th>
<th>Col16</th>
<th>Col17</th>
<th>Col18</th>
<th>Col19</th>
<th>Col20</th>
<th>Col21</th>
<th>Col22</th>
<th>Col23</th>
<th>Col24</th>
<th>Col25</th>
<th>Col26</th>
<th>Col27</th>
<th>Col28</th>
<th>Col29</th>
<th>Col30</th>
<th>Col31</th>
</tr>
<tr>
<td class="TestRFloatL"><a href="#">The brown fox is mad jumping all over the place for no reason </a></td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
</tr>
<tr>
<td class="TestRFloatL"><a href="#">The brown fox is mad jumping all over the place for no reason </a></td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
</tr>
<tr>
<td class="TestRFloatL"><a href="#">The brown fox is mad jumping all over the place for no reason </a></td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
</tr>
<td class="TestRFloatL"><a href="#">The brown fox is mad jumping all over the place for no reason </a></td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
</tr>
<td class="TestRFloatL"><a href="#">The brown fox is mad jumping all over the place for no reason </a></td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
</tr>
<td class="TestRFloatL"><a href="#">The brown fox is mad jumping all over the place for no reason </a></td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
</tr>
<td class="TestRFloatL"><a href="#">The brown fox is mad jumping all over the place for no reason </a></td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
</tr>
<td class="TestRFloatL"><a href="#">The brown fox is mad jumping all over the place for no reason </a></td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
</tr>
<td class="TestRFloatL"><a href="#">The brown fox is mad jumping all over the place for no reason </a></td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
</tr>
<td class="TestRFloatL"><a href="#">The brown fox is mad jumping all over the place for no reason </a></td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
</tr>
<td class="TestRFloatL"><a href="#">The brown fox is mad jumping all over the place for no reason </a></td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
<td>The brown fox is mad jumping all over the place for no reason </td>
</tr>
</table>
</div>
</div>