Scrollable Content inside scrollable Table

by Bianca Kuehweidner

HTML

<div class="wrapper">

<div class="alldates">

   <table>
   <tr>
       <th class="date" colspan="2">Termin</th>
       <th class="duration">0</th>
       <th class="duration">1</th>
       <th class="duration">2</th>
       <th class="duration">3</th>
       <th class="duration">4</th>
       <th class="duration">5</th>
       <th class="duration">6</th>
       <th class="duration">7</th>
       <th class="duration">8</th>
       <th class="duration">9</th>
       <th class="duration">10</th>
       <th class="duration">11</th>
       <th class="duration">12</th>
       <th class="duration">13</th>
       <th class="duration">14</th>
       <th class="duration">15</th>
       <th class="roomtype">Zimmertyp</th>
       <th class="meals">Verpflegung</th>
       <th class="costpP">Pro Person</th>
   </tr>
   <tr>
       <td class="weekday">Mo</td>
       <td class="date">06.Dez. 2017</td>
       <td class="duration">12</td>
       <td class="duration">14</td>
       <td class="duration">21</td>
       <td class="duration">11</td>
       <td class="duration">15</td>
       <td class="duration">19</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td class="duration">56</td>
       <td class="duration">89</td>
       <td class="duration">45</td>
       <td class="roomtype">Club Room</td>
       <td class="meals">HP</td>
       <td class="costpP">155.- &euro;</td>
   </tr>
   <tr>
       <td class="weekday">Mo</td>
       <td class="date">06.Dez. 2017</td>
       <td class="duration">12</td>
       <td class="duration">14</td>
       <td class="duration">21</td>
       <td class="duration">11</td>
       <td class="duration">15</td>
       <td class="duration">19</td>
       <td class="duration">20</td>
       <td class="duration">102</td>
       <td...

CSS

table {
    border-collapse:collapse;
}
td, th { 
  border:1px solid #ccc; 
  text-align: left;  
  white-space: nowrap;
  line-height: 20px;
  padding: 3px 5px;
}

/*
.wrapper {
  height: 100px;
  overflow-y: scroll;
}
*/

.alldates {
    width: 225px;
    overflow: auto;  
    margin-left:160px;
}

.weekday {
    position:fixed;
    width:40px;
    left:0;
}
.date {
    position:fixed;
    width:100px;
    left:52px;
}
.roomtype {
  position: fixed;
  width: 100px;
  left: 395px;
}
.meals {
  position: fixed;
  width: 100px;
  left: 505px;  
}
.costpP {
  position: fixed;
  width: 100px;
  left: 616px;  
  text-align: right;
}