Горизонтальная прокрутки внутри всего столбца внутри таблицы

Question

У меня есть таблица, которая показывает трамвай график линии для геодезистов, которая была реализована с использованием angular2 компонента

В настоящее время это повторяющийся в течение 3-х дней. Я хочу повторить его в течение 7 дней, и он должен быть прокручиваемым. Прокрутка должна происходить только для трамвайной линии. Компонент трамвайной линии имеет много стиля, и он ломается всякий раз, когда выполняется стиль прокрутки. Я искал много вариантов и не мог найти реального решения.

Это код для расписания компонента

<schedule-component ng-reflect-schedule="[object Object]" ng-reflect-  activities="[object Object]" ng-reflect-start-time="7" ng-reflect-end-time="18"><div class="inner"> 
    <div class="lane" ng-reflect-inner-h-t-m-l="&lt;div class=&quot;scheduleMarker mytooltip&quot; style = &quot;margin-left: 16.666666666666664%&quot;&gt;&lt;span class=&quot;mytooltiptext&quot;&gt;&lt;i class=&quot;fa fa-flag-o&quot;&gt;&lt;/i&gt;&amp;nbsp;Time: 09:00&lt;br/&gt;&lt;strong&gt; RG2 7HY&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;tramLine mytooltip&quot; style= &quot;width: 4.166666666666666%; background-color: blue; margin-left: 0%;&quot;&gt;&lt;span class=&quot;mytooltiptext&quot; style=&quot;background-color:black&quot; &gt;&lt;i class=&quot;fa fa-arrow-right&quot;&gt;&lt;/i&gt;&lt;strong&gt;&amp;nbsp;09:00 - 09:30&lt;/strong&gt;&lt;br/&gt;Travel&lt;br/&gt;Duration: 0:30:&lt;br/&gt;Distance: 1.324 KM&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;tram mytooltip&quot; style= &quot;width: 1.388888888888884%; background-color: slateblue; margin-left: 0%;&quot;&gt;&lt;span class=&quot;mytooltiptext&quot; style=&quot;background-color:black&quot;&gt;&lt;i class=&quot;fa fa-key&quot;&gt;&lt;/i&gt;&lt;strong&gt;&amp;nbsp;09:30 - 09:40&lt;/strong&gt;&lt;br/&gt;Key pickup&lt;br/&gt;EX2 7HY&lt;br/&gt;Duration: 00:10&lt;br/&gt;This is some description&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;tramLine mytooltip&quot; style= &quot;width: 6.944444444444449%; background-color: blue; margin-left: 0%;&quot;&gt;&lt;span class=&quot;mytooltiptext&quot; style=&quot;background-color:black&quot; &gt;&lt;i class=&quot;fa fa-arrow-right&quot;&gt;&lt;/i&gt;&lt;strong&gt;&amp;nbsp;09:40 - 10:30&lt;/strong&gt;&lt;br/&gt;Travel&lt;br/&gt;Duration: 00:50&lt;br/&gt;Distance: 4.532 KM&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;tram mytooltip&quot; style= &quot;width: 8.333333333333332%; background-color: blue; margin-left: 0%;&quot;&gt;&lt;span class=&quot;mytooltiptext&quot; style=&quot;background-color:black&quot;&gt;&lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt;&lt;strong&gt;&amp;nbsp;10:30 - 11:30&lt;/strong&gt;&lt;br/&gt;Allocated booking&lt;br/&gt;EX2 7HY&lt;br/&gt;Duration: 01:00&lt;br/&gt;This is some description&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;tramLine mytooltip&quot; style= &quot;width: 4.166666666666666%; background-color: blue; margin-left: 0%;&quot;&gt;&lt;span class=&quot;mytooltiptext&quot; style=&quot;background-color:black&quot; &gt;&lt;i class=&quot;fa fa-arrow-right&quot;&gt;&lt;/i&gt;&lt;strong&gt;&amp;nbsp;11:30 - 12:00&lt;/strong&gt;&lt;br/&gt;Travel&lt;br/&gt;Duration: 00:30&lt;br/&gt;Distance: 3.532 KM&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;tram mytooltip&quot; style= &quot;width: 1.388888888888884%; background-color: slateblue; margin-left: 0%;&quot;&gt;&lt;span class=&quot;mytooltiptext&quot; style=&quot;background-color:black&quot;&gt;&lt;i class=&quot;fa fa-key&quot;&gt;&lt;/i&gt;&lt;strong&gt;&amp;nbsp;12:00 - 12:10&lt;/strong&gt;&lt;br/&gt;Key drop&lt;br/&gt;EX2 7HY&lt;br/&gt;Duration: 00:10&lt;br/&gt;This is some description&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;tram mytooltip&quot; style= &quot;width: 4.166666666666666%; background-color: tan; margin-left: 19.44444444444445%;&quot;&gt;&lt;span class=&quot;mytooltiptext&quot; style=&quot;background-color:black&quot;&gt;&lt;i class=&quot;fa-exclamation-circle&quot;&gt;&lt;/i&gt;&lt;strong&gt;&amp;nbsp;14:30 - 15:00&lt;/strong&gt;&lt;br/&gt;No-working Time&lt;br/&gt;EX2 7HY&lt;br/&gt;Duration: 00:30&lt;br/&gt;This is some description&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;scheduleMarker mytooltip&quot; style = &quot;margin-left: 8.333333333333332%&quot;&gt;&lt;span class=&quot;mytooltiptext&quot;&gt;&lt;i class=&quot;fa fa-flag-o&quot;&gt;&lt;/i&gt;&amp;nbsp;Time: 16:00&lt;br/&gt;&lt;strong&gt; RG2 7HY&lt;/strong&gt;&lt;/span&gt;&lt;/div&gt;"><div class="scheduleMarker mytooltip" style="margin-left: 16.666666666666664%"><span class="mytooltiptext"><i class="fa fa-flag-o"></i>&nbsp;Time: 09:00<br><strong> RG2 7HY</strong></span></div><div class="tramLine mytooltip" style="width: 4.166666666666666%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-arrow-right"></i><strong>&nbsp;09:00 - 09:30</strong><br>Travel<br>Duration: 0:30:<br>Distance: 1.324 KM</span></div><div class="tram mytooltip" style="width: 1.388888888888884%; background-color: slateblue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-key"></i><strong>&nbsp;09:30 - 09:40</strong><br>Key pickup<br>EX2 7HY<br>Duration: 00:10<br>This is some description</span></div><div class="tramLine mytooltip" style="width: 6.944444444444449%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-arrow-right"></i><strong>&nbsp;09:40 - 10:30</strong><br>Travel<br>Duration: 00:50<br>Distance: 4.532 KM</span></div><div class="tram mytooltip" style="width: 8.333333333333332%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-home"></i><strong>&nbsp;10:30 - 11:30</strong><br>Allocated booking<br>EX2 7HY<br>Duration: 01:00<br>This is some description</span></div><div class="tramLine mytooltip" style="width: 4.166666666666666%; background-color: blue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-arrow-right"></i><strong>&nbsp;11:30 - 12:00</strong><br>Travel<br>Duration: 00:30<br>Distance: 3.532 KM</span></div><div class="tram mytooltip" style="width: 1.388888888888884%; background-color: slateblue; margin-left: 0%;"><span class="mytooltiptext" style="background-color:black"><i class="fa fa-key"></i><strong>&nbsp;12:00 - 12:10</strong><br>Key drop<br>EX2 7HY<br>Duration: 00:10<br>This is some description</span></div><div class="tram mytooltip" style="width: 4.166666666666666%; background-color: tan; margin-left: 19.44444444444445%;"><span class="mytooltiptext" style="background-color:black"><i class="fa-exclamation-circle"></i><strong>&nbsp;14:30 - 15:00</strong><br>No-working Time<br>EX2 7HY<br>Duration: 00:30<br>This is some description</span></div><div class="scheduleMarker mytooltip" style="margin-left: 8.333333333333332%"><span class="mytooltiptext"><i class="fa fa-flag-o"></i>&nbsp;Time: 16:00<br><strong> RG2 7HY</strong></span></div></div> 
</div> 
</schedule-component> 

Возможно ли это? Нужно ли каким-либо образом реализовать какой-либо другой способ? Я только что загрузил html и поместил его в плункер. См. Ссылку ниже.

http://plnkr.co/edit/QOaBWK?p=preview

Ниже приводится описание того, как я хочу скроллер быть.

Answer 1

Вопрос сейчас неуместен, и я внедрил свою собственную версию, восстановив снова.