JSFiddle - React, Tailwind, and code Playground

by Bianca Kuehweidner

HTML

<div class="wrapper">

   <table>
   <tr>
       <th class="date" colspan="2">Date</th>
       <th class="duration">Aufenthaltsdauern und Preise</th>
   </tr>
   <tr>
       <td class="weekday">Mo</td>
       <td class="date">06.Dez. 2017</td>
       <td class="duration">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis est vitae nunc adipiscing, vel tincidunt nulla gravida</td>
   </tr>
   <tr>
       <td class="weekday">Mo</td>
       <td class="date">06.Dez. 2017</td>
       <td class="duration">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis est vitae nunc adipiscing, vel tincidunt nulla gravida</td>
   </tr>
   <tr>
       <td class="weekday">Di</td>
       <td class="date">07.Dez. 2017</td>
       <td class="duration">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis est vitae nunc adipiscing, vel tincidunt nulla gravida</td>
   </tr>
   <tr>
       <td class="weekday">Di</td>
       <td class="date">07.Dez. 2017</td>
       <td class="duration">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mollis est vitae nunc adipiscing, vel tincidunt nulla gravida</td>
   </tr>
   </table>

</div>

CSS

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

.wrapper {
    width: 500px;
    overflow: auto;  
    margin-left:156px;
}

.weekday {
    position:fixed;
    width:40px;
    left:0;
}
.date {
    position:fixed;
    width:100px;
    left:52px;
}