JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<body>
<div class="panel-group" id="outerPanelGroup">
<div class='panel panel-primary'>

  <div class="panel-heading panelHeading">
    <h4 class="panel-title">Monday</h4>
  </div> <!-- panel-heading //outer -->
    <div class="panel-body panelBody">
      <div class="panel-group">
              <div class="panel panel-primary">

        <div class="panel-heading panelHeading">
        <h4 class="panel-title">Foo</h4>
        </div> <!-- panel-heading //inner -->
        <div class="panel-body panelBody" style="display:none;"> 
          <div class='table-responsive'>
            <table class='table table-bordered'>
              <thead>
                <tr>
                  <th style='min-width:20px;text-align:center;'>
                    <strong>
                      <i class='fa fa-long-arrow-up'></i>
                    </strong>
                  </th>
                  <th Student>Student</th>
                  <th>Notes</th>
                  <th>B-day</th>
                  <th>Mobil</th>
                  <th>Home</th>
                  <th>21 Aug</th><th>28 Aug</th><th>04 Sep</th><th>11 Sep</th><th>18 Sep</th><th>25 Sep</th><th>02 Okt</th><th>09 Okt</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <td class='countStudents' align='center' colspan='6'>
                    <strong>I alt</strong>
                  </td>
                  <td align='center'><strong>15</strong></td>
                  <td align='center'><strong>18</strong></td>
                  <td align='center'><strong>16</strong></td>
                    <td align='center'><strong>15</strong></td>
    ...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css');
 @import url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');

.table-responsive>.fixed-column {
    position: absolute;
	top:auto;
	bottom:auto;
	z-index:1000;
    display: inline-block;
    width: auto;
    border-right: 1px solid #ddd;
	-webkit-overflow-scrolling : touch;
}
@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}
@media(max-width:768px)
{
 .countStudents
{
text-align:left !important;
}  
.table
{
background-color:white;   
}
}

JavaScript

$(document).ready(function () {
	    $('.panelHeading').click(function (e) {
	        e.stopPropagation();
	        var $sliderContent = $(this).next('.panelBody');
	        $panelBody = $(this).closest('.panel-group').find('.panel-body');
	        $panelBody.not($sliderContent.slideToggle("fast", changeInnerState)).find('.panel-body:visible').addBack().slideUp();
	    });	
});

function changeInnerState() 
{
	var $this = $(this);
	if ($this.is(':hidden')) $this.find('.panel-body').slideUp();
}

$('.table').each(function(index, element) {
   //fixed first two cloumn, when the screen is less than 768px wide
var $table = $(element);
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');

$fixedColumn.find('thead th:not(:first-child,:first-child +th),td:not(:first-child, :first-child +td)').remove();
$fixedColumn.find('tfoot td:not(:first-child)').remove();


$fixedColumn.find('tr').each(function (i, elem) {
    $(this).height($table.find('tr:eq(' + i + ')').height());
}); 
});