JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <div id="label_column">
    <div class="header header_cell">
      <span id="year">2014</span>
    </div>
        <div class="week_row label header_cell">
      <span class="label_middle">Titel 1</span>
    </div>
    <div class="week_row label header_cell">
      <span class="label_middle">Titel 2</span>
    </div>
    <div class="week_row label header_cell">
      <span class="label_middle">Titel 3</span>
    </div>
    <div class="week_row label header_cell">
      <span class="label_middle">Titel 4</span>
    </div>
    <div class="week_row label header_cell">
      <span class="label_middle">Titel 5</span>
    </div>
    <div class="week_row label header_cell">
      <span class="label_middle">Titel 6</span>
    </div>
    <div class="week_row label header_cell">
      <span class="label_middle">Titel 7</span>
    </div>
    <div class="week_row label header_cell">
      <span class="label_middle">Titel 8</span>
    </div>
    <div class="week_row label header_cell">
      <span class="label_middle">Titel 9</span>
    </div>
  </div>
  <div class="table_content">
    <div class="header">
      <div class="header_row">
        <div class="header_cell" style="width: 150px;">Januar</div><!--
        --><div class="header_cell" style="width: 120px;">Februar</div><!--
        --><div class="header_cell" style="width: 120px;">März</div><!--
        --><div class="header_cell" style="width: 150px;">April</div><!--
        --><div class="header_cell" style="width: 120px;">Mai</div><!--
        --><div class="header_cell" style="width: 120px;">Juni</div><!--
        --><div class="header_cell" style="width: 150px;">Juli</div><!--
        --><div class="header_cell" style="width: 120px;">August</div><!--
        --><div class="header_cell" style="width: 120px;">September</div><!--
        --><div class="header_cell" style="width: 150px;">Oktober</div><!--
        --><div class="header_cell" style="width: 120px;">November</div><!--
        --><div...

CSS

.table_content {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: 50%;
}
.header {
    height: 3em;
    background: -webkit-linear-gradient(#D7D6D6 0%, #959595 100%);
    background: -moz-linear-gradient(#D7D6D6 0%, #959595 100%);
    background: -o-linear-gradient(#D7D6D6 0%, #959595 100%);
    background: linear-gradient(#D7D6D6 0%, #959595 100%);
}
.header.fixed {
    background-attachment: fixed;
}
.header .header_row {
    height: 1.5em;
}
.header .header_row .header_cell {
    display: inline-block;
    height: 1.5em;
}

.header_cell {
    outline: 1px solid #000;
    text-align: center;
}
.week_column {
    width: 30px;
}
.week_row {
    height: 30px;
}
.week_cell {
    outline: 1px solid #d4d4d4;
    display: inline-block;
}
#label_column {
    float: left;
}

#year
{
  line-height: 3em;   
}

.label_middle
{
   line-height: 30px;
    padding: 0px 10px;
}

.label
{
    background-image: -webkit-linear-gradient(left,#D4F3FF 0%, #73DBE5 100%); 
  background-image: -moz-linear-gradient(left,#D4F3FF 0%, #73DBE5 100%); 
  background-image: -o-linear-gradient(left,#D4F3FF 0%, #73DBE5 100%); 
  background-image: linear-gradient(left,#D4F3FF 0%, #73DBE5 100%);
}