Как прокрутить с Div на таблице, которая частично прокручивается? - PullRequest
Новая
       11

Как прокрутить с Div на таблице, которая частично прокручивается?

0 голосов
/ 02 июля 2018

Теперь я создал таблицу с фиксированным заголовком и прокручиваемым телом. В части тела я поместил div на стол. Когда я прокручиваю таблицу, эти div не будут прокручиваться, потому что они размещены с позиции: абсолютный. Тем не менее, если я использую Position: относительный, есть прокрутка, но размещены за пределами таблицы. Можно ли разместить эти элементы на столе и прокрутить таблицу?

Я покажу вам упрощенный код ...

На самом деле я разместил эти div с помощью javascript вместо статического html. 

<html>
<head>
</head>
<body>
<style>
div#lower-div {overflow-x: hidden;overflow-y: scroll;height: 300px;width:650px;}
table {border-collapse: collapse;}
table th, table td { width: 100px; height: 30px; border: solid 1px gray;}
th#dummy-column { width: 17px;}
div#table-wrapper div#lower-div { height: 200px; border:solid 1px gray;}

div#schedule1{position:absolute;top:102px;left:114px;width:98px;height:56px;background-color:cyan;}
div#schedule2{position:absolute;top:162px;left:218px;width:98px;height:56px;background-color:cyan;}
</style>
<script>

</script>
<div id="table-wrapper" >
<div id="upper-div">
<table id="upper-table">
<thead>
<tr>
<th>time</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th id="dummy-column"></th>
</tr>
</thead>
</table>
</div>

<div id="lower-div">
<div id="scroll-area">
<table id="lower-table">
<tbody>
<tr><td>00:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>01:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>02:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>03:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>04:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>05:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>06:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>07:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>08:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>09:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>10:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>11:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>12:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>13:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>14:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>15:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>16:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>17:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>18:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>19:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>20:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>21:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>22:00</td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td>23:00</td><td></td><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>
<div id="schedule1">sched.1</div>
<div id="schedule2">sched.2</div>
</div>
</div>

</div>
</body>
</html>
...