html - 表格内整列内的水平滚动

Question

我有一张表格，显示了使用 angular2 组件实现的测量员的电车线路时间表

目前它会重复 3 天。我想重复 7 天，它应该是可滚动的。滚动应该只发生在电车线路上。 tramline 组件本身有很多样式，只要实现 scroll-y 样式，它就会中断。我已经寻找了很多选择，但找不到真正的解决方案。

这是调度组件的代码

<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 并将其放入 plunker 中。请参阅下面的链接。

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

下面描述了我希望滚动条的样子。

Answer 1

问题现在无关紧要，我已经通过重新构建实现了我自己的版本。