diff --git a/assets/style/schedule-table.scss b/assets/style/schedule-table.scss
new file mode 100644
index 00000000..8500c0f5
--- /dev/null
+++ b/assets/style/schedule-table.scss
@@ -0,0 +1,121 @@
+$current-week-day-color: #4b8ff3;
+
+.schedule-table {
+  margin: 0 auto;
+  width: 100%;
+  min-width: 50em;
+  position: relative;
+
+  table {
+    margin: 2em auto;
+    border-spacing: 0;
+    text-align: center;
+
+    thead {
+      animation-duration: 0.3s;
+
+      th {
+        font-weight: normal;
+        vertical-align: baseline;
+        height: 80px;
+      }
+
+      .date {
+        font-size: 1.5em;
+      }
+
+      .group {
+        color: #666;
+      }
+    }
+
+    tbody tr:nth-child(even) {
+      background-color: #f0f2da;
+    }
+
+    td {
+      vertical-align: baseline;
+
+      &:not(.group) {
+        width: 15%;
+        padding: .75em 1em;
+      }
+
+      &.group {
+        width: 5%;
+
+        p.name {
+          font-size: 1.25em;
+          font-weight: 800;
+        }
+      }
+    }
+
+    thead.fix {
+      position: fixed;
+      top: 41px;
+      background-color: rgba(255, 255, 255, .95);
+      z-index: 50;
+      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
+
+      .current {
+        border: none;
+        border-radius: 0;
+        color: $current-week-day-color;
+      }
+
+      th {
+        height: auto;
+
+        .day {
+          margin: .5em 0;
+        }
+
+        .date {
+          margin: 0 0 .25em;
+        }
+      }
+    }
+
+    tbody.fix:before {
+      content: '';
+      display: block;
+      margin-top: 80px;
+    }
+  }
+
+  p {
+    margin-bottom: .2em;
+  }
+
+  a {
+    color: black;
+
+    text-decoration: none;
+    border-bottom: 1px solid #ccc;
+  }
+
+  .lesson {
+    font-size: 1.1em;
+    font-weight: bold;
+  }
+
+  .teacher {
+    font-style: italic;
+  }
+
+  .current {
+    border-left: 2px solid $current-week-day-color;
+    border-right: 2px solid $current-week-day-color;
+  }
+
+  .canceled:before {
+    position: absolute;
+    content: "";
+    width: 70%;
+    height: 100%;
+    top: 0;
+    left: 15%;
+    background-image: url(lesson-canceled.svg);
+  }
+}
diff --git a/assets/style/schedule.scss b/assets/style/schedule.scss
index 469e2016..6cfb6e9e 100644
--- a/assets/style/schedule.scss
+++ b/assets/style/schedule.scss
@@ -9,208 +9,13 @@
     }
 }
 
-.schedule{
+.schedule {
     position: relative;
     margin: 30px auto 0 auto;
     padding-bottom: 50px;
     text-align: center;
 
-    & > p{
+    & > p {
         margin: 0 0 1em;
-        //text-align: right;
     }
-
-    .schedule-block{
-        overflow-x: scroll;
-    }
-
-    table{
-        position: relative;
-        margin: 30px auto 0 auto;
-        
-        border-spacing: 0px;
-        text-align: center;
-
-        p {
-            margin-bottom: .25em;
-        }
-
-        td{
-            position: relative;
-
-            &:not(.group){
-                min-width: 150px;
-            /*    width: 15%;*/
-                width: 150px;
-                padding: 8px 10px 8px;
-                
-                vertical-align:baseline;
-            }
-
-            &.group{
-                min-width: 60px;
-            /*    width: 5%;*/
-                width: 60px;
-                position: relative;
-                vertical-align:baseline;
-
-                p.name{
-                    font-size: 1.4em;
-                    font-weight: 800;
-                    color: #242424;
-                }
-            }
-        }
-    }
-
-    thead{
-        animation-duration: 0.3s;
-
-        th{
-            font-weight: normal;
-            vertical-align: baseline;
-            height: 80px;
-            padding: 10px 0 0;
-
-            &.weekend{
-                color: #f52;
-            }
-        }
-
-        .date{
-            font-size: 1.5em;
-        }
-
-        .group{
-            color: #666;
-        }
-    }
-
-    tbody tr:nth-child(even){
-        background-color: #f3f3fd;
-    }
-
-    .lesson{
-        font-size: 1.1em;
-        font-weight: bold;
-    }
-
-    .teacher{
-        font-style: italic;
-    }
-
-    a{
-        color: black;
-        
-        text-decoration: none;
-        border-bottom: 1px solid #ccc;
-    }
-
-    .current{
-        border-left: 2px solid #4b8ff3;
-        border-right: 2px solid #4b8ff3;
-
-        &.first{
-            border-radius: 15px 15px 0 0;
-            border-top: 2px solid #4b8ff3;
-        }
-
-        &.last{
-            border-radius: 0 0 15px 15px;
-            border-bottom: 2px solid #4b8ff3;
-        }
-    }
-
-    .canceled:before{
-        position: absolute;
-        content: "";
-        width:70%;
-        height: 100%;
-        top: 0;
-        left: 15%;
-        background-image: url(lesson-canceled.svg);
-    }
-
-    ul{
-        margin: 0px auto 30px auto;
-        text-align: center;
-
-        li{
-            display: inline-block;
-            padding: 5px 10px;
-            margin: 0 5px;
-
-            &.current{
-                color: #68aeff;
-                border: none;
-                font-weight: bold;
-            /*    color: #555;*/
-            /*    padding: 5px 15px;*/
-            /*    border: 1px solid #4b8ff3;*/
-            /*    border-radius: 100px;*/
-            }
-        }
-
-        a{
-            color: #3f9cea;
-            border-bottom: 1px dashed #ccc;
-            display: inline-block;
-            padding: 0px;
-        }
-    }
-
-    thead.fix{
-        position: fixed;
-        top: 42px;
-        background-color: rgba(255, 255, 255, 0.96);
-        z-index: 50;
-        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
-        border-radius: 0 0 20px 20px;
-
-        .current{
-            border: none;
-            border-radius: 0px;
-            color: #3f9cea;
-            width: 155px;
-        }
-
-        th{
-            height: auto;
-
-            :not(.group){
-                min-width: 150px;
-            /*    width: 15%;*/
-                width: 150px;
-                padding: 8px 10px 8px;
-            }
-
-            &.group{
-                width: 63px;
-            }
-
-            .day{
-                margin: 0;
-                line-height: 0;
-            }
-
-            .date{
-                margin: 15px 0;
-                line-height: 0;
-            }
-        }
-    }
-
-    tbody.fix:before{
-        content: "";    
-        display: block;
-        margin-top: 90px;
-    }
-}
-
-@media screen and (max-device-width: 400px){
-    .schedule{
-        thead.fix{
-            display: none;
-        }
-    }
-}
+}
\ No newline at end of file
diff --git a/client/modules/schedule.js b/client/modules/schedule.js
index c7f58479..9eec6b62 100644
--- a/client/modules/schedule.js
+++ b/client/modules/schedule.js
@@ -1,7 +1,7 @@
 var getDates = require('../../utils/date').getDates;
 
 module.exports = angular.module('hudozka.schedule', [])
-    .directive('schedule', function($compile){
+    .directive('schedule', function ($compile) {
         return {
             restrict: 'E',
             scope: {
@@ -22,10 +22,12 @@ module.exports = angular.module('hudozka.schedule', [])
             }
         };
     })
-    .directive('scheduleTable', function(){
+    .directive('scheduleTable', function () {
         return {
             templateUrl: '/views/schedule/table.html',
-            link: function(scope, element){
+            link: function (scope, element) {
+                //var this_element = element[0];
+
                 var now = new Date();
                 var dates = getDates(now);
 
@@ -39,9 +41,23 @@ module.exports = angular.module('hudozka.schedule', [])
 
                 var $tbody = element.find('table tbody');
                 var $thead = element.find('table thead');
+                var $td_list = [];
 
+                var min;
+                var max;
                 $(window).scroll(function () {
-                    if ($(this).scrollTop() >= 220) {
+                    const scrollOffset = 150;
+                    if(!min) min = element.find('table tbody tr:first-child')[0].offsetTop + scrollOffset;
+                    if(!max) max = element.find('table tbody tr:last-child')[0].offsetTop + scrollOffset;
+
+                    if(!$td_list.length) $td_list = element.find('table tbody tr:first-child td');
+                    $td_list.each(function (i) {
+                        var w = this.offsetWidth;
+                        $thead.find('th')[i].style.width = `${w}px`;
+                    });
+
+                    var scroll = $(this).scrollTop();
+                    if (scroll >= min && scroll <= max) {
                         $thead.addClass('fix animated fadeInDown');
                         $tbody.addClass('fix');
                     } else {
diff --git a/templates/views/schedule/table.html b/templates/views/schedule/table.html
index 57f90253..b18b724f 100644
--- a/templates/views/schedule/table.html
+++ b/templates/views/schedule/table.html
@@ -1,6 +1,6 @@
-<div class="schedule-block" ng-show="groups">
+<div class="schedule-table" ng-show="groups">
     <table>
-        <thead class="">
+        <thead>
         <tr>
             <th class="group">Гр.</th>
             <th ng-class="{current: isToday(0)}">
@@ -35,21 +35,18 @@
             </th>
         </tr>
         </thead>
+
         <tbody>
         <tr ng-repeat="group in groups">
             <td class="group">
                 <p class="name">{{group.name}}</p>
-
                 <p class="time">{{group.time}}</p>
             </td>
 
             <td ng-repeat="day in group.days track by $index" ng-class="{current: isToday($index)}">
                 <p class="lesson"><a href="">{{day.lesson}}</a></p>
-
                 <p class="teacher"><a href="">{{day.teacher}}</a></p>
-
                 <p class="time">{{day.time[0]}}</p>
-
                 <p class="time">{{day.time[1]}}</p>
             </td>
         </tr>